From 985fa57934eac7e48299f75c5f32a20619570298 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Tue, 19 Jun 2018 01:18:53 -0700 Subject: [PATCH 01/28] Move Angular wrapper directive usage into route template --- .../components/grokdebugger/grokdebugger.html | 40 +++++++++---------- .../grokdebugger/grokdebugger_route.html | 4 +- 2 files changed, 22 insertions(+), 22 deletions(-) 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 index 2bfafa0baafeb..f3fa7c40c92e1 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.html +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.html @@ -1,23 +1,21 @@ - -
-
- - - -
- -
- +
+
+ + + +
+
+
- +
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 @@ - + + + From e2e26bebbde750a1a12576c99341611a6c51b26d Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Tue, 19 Jun 2018 01:26:38 -0700 Subject: [PATCH 02/28] Move sole directive into new directives folder --- .../grokdebugger/grokdebugger.html | 0 .../grokdebugger/grokdebugger.js | 8 ++++---- .../grokdebugger/grokdebugger.less | 0 .../{components => directives}/grokdebugger/index.js | 0 .../public/sections/grokdebugger/grokdebugger_route.js | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) rename x-pack/plugins/grokdebugger/public/sections/grokdebugger/{components => directives}/grokdebugger/grokdebugger.html (100%) rename x-pack/plugins/grokdebugger/public/sections/grokdebugger/{components => directives}/grokdebugger/grokdebugger.js (94%) rename x-pack/plugins/grokdebugger/public/sections/grokdebugger/{components => directives}/grokdebugger/grokdebugger.less (100%) rename x-pack/plugins/grokdebugger/public/sections/grokdebugger/{components => directives}/grokdebugger/index.js (100%) diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.html b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.html similarity index 100% rename from x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.html rename to x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.html diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js similarity index 94% rename from x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.js rename to x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js index 105d835b5f8cb..37ac9aa29a961 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grokdebugger/grokdebugger.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js @@ -10,10 +10,10 @@ 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 '../../components/event_input'; +import '../../components/event_output'; +import '../../components/pattern_input'; +import '../../components/custom_patterns_input'; import { isEmpty, trim } from 'lodash'; const app = uiModules.get('xpack/grokdebugger'); 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 100% 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 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.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', { From 6ce6a20dd823957eb955c34653f4c14bcc3baefa Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Tue, 19 Jun 2018 12:05:45 -0700 Subject: [PATCH 03/28] WIP checkin: basic conversion to React components --- .../custom_patterns_input.html | 38 --------- .../custom_patterns_input.js | 77 +++++++++---------- .../components/custom_patterns_input/index.js | 2 +- .../components/event_input/event_input.html | 18 ----- .../components/event_input/event_input.js | 46 ++++------- .../components/event_input/index.js | 2 +- .../components/event_output/event_output.html | 18 ----- .../components/event_output/event_output.js | 48 ++++-------- .../components/event_output/index.js | 2 +- .../components/grok_debugger/grok_debugger.js | 69 +++++++++++++++++ .../components/grok_debugger/index.js | 7 ++ .../components/pattern_input/index.js | 2 +- .../pattern_input/pattern_input.html | 18 ----- .../components/pattern_input/pattern_input.js | 47 ++++------- .../directives/grokdebugger/grokdebugger.html | 21 ----- .../directives/grokdebugger/grokdebugger.js | 17 ++-- 16 files changed, 172 insertions(+), 260 deletions(-) delete mode 100644 x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.html delete mode 100644 x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.html delete mode 100644 x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.html create mode 100644 x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/grok_debugger.js create mode 100644 x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/index.js delete mode 100644 x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.html delete mode 100644 x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.html 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..99b2cb7de8d61 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,42 @@ * you may not use this file except in compliance with the Elastic License. */ -import { uiModules } from 'ui/modules'; -import { InitAfterBindingsWorkaround } from 'ui/compat'; -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'; +import React from 'react'; +import { + EuiAccordion, + EuiCallOut, + EuiCodeBlock, + EuiFormRow, + EuiCodeEditor +} from '@elastic/eui'; -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 ( + + + + { sampleCustomPatterns } + + - onSectionToggle = (sectionId) => { - this.isCollapsed[sectionId] = !this.isCollapsed[sectionId]; - } - - isSectionCollapsed = (sectionId) => { - return this.isCollapsed[sectionId]; - } - } - }; -}); + + + + + ); +} 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..7d7fbf15d5b3f 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,20 @@ * you may not use this file except in compliance with the Elastic License. */ -import { uiModules } from 'ui/modules'; -import { EDITOR } from '../../../../../common/constants'; -import { applyEditorOptions } from '../../../../lib/ace'; -import template from './event_input.html'; -import './event_input.less'; -import 'ace'; +import React from 'react'; +import { + EuiFormRow, + EuiCodeEditor +} from '@elastic/eui'; -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/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..f09e96d7c8145 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,19 @@ * 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, + 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, - highlightActiveLine: false, - highlightGutterLine: false, - minLines: 20, - maxLines: 25 - }); - editor.$blockScrolling = Infinity; - }; - } - } - }; -}); +export function EventOutput({ value }) { + return ( + + + + ); +} 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..646e7fa5180fd --- /dev/null +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/grok_debugger.js @@ -0,0 +1,69 @@ +/* + * 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 { EuiForm, EuiButton, EuiPanel } from '@elastic/eui'; +import { EventInput } from '../event_input'; +import { PatternInput } from '../pattern_input'; +import { CustomPatternsInput } from '../custom_patterns_input'; +import { EventOutput } from '../event_output'; + +export class GrokDebugger extends React.Component { + state = { + rawEvent: '', + pattern: '', + customPatterns: '', + structuredEvent: '', + isSimulateEnabled: false + }; + + onRawEventChange = (rawEvent) => { + this.setState({ rawEvent }); + } + + onPatternChange = (pattern) => { + this.setState({ pattern }); + } + + onCustomPatternsChange = (customPatterns) => { + this.setState({ customPatterns }); + } + + onSimulateClick = () => { + console.log('simulate clicked'); + } + + 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/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..edb632c13f639 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,20 @@ * 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'; + EuiFormRow, + EuiCodeEditor +} from '@elastic/eui'; -const app = uiModules.get('xpack/grokdebugger'); - -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/directives/grokdebugger/grokdebugger.html b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.html deleted file mode 100644 index f3fa7c40c92e1..0000000000000 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.html +++ /dev/null @@ -1,21 +0,0 @@ -
-
- - - -
- -
- -
-
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 index 37ac9aa29a961..ee7ead8a91b05 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js @@ -5,16 +5,15 @@ */ 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 { GrokDebugger } from '../../components/grok_debugger'; import '../../components/event_input'; import '../../components/event_output'; import '../../components/pattern_input'; import '../../components/custom_patterns_input'; -import { isEmpty, trim } from 'lodash'; +import { render } from 'react-dom'; +import React from 'react'; const app = uiModules.get('xpack/grokdebugger'); @@ -23,9 +22,12 @@ app.directive('grokdebugger', function ($injector) { return { restrict: 'E', - template: template, - bindToController: true, - controllerAs: 'grokdebugger', + link: (scope, el) => { + render(, el[0]); + } + }; +}); +/* controller: class GrokdebuggerController { constructor() { this.structuredEvent = {}; @@ -85,3 +87,4 @@ app.directive('grokdebugger', function ($injector) { } }; }); +*/ From 7b2aeff9c0a600ca4bb09e3c579ec998080143e7 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Tue, 19 Jun 2018 12:36:41 -0700 Subject: [PATCH 04/28] Fix sample custom patterns indentation --- .../custom_patterns_input/custom_patterns_input.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) 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 99b2cb7de8d61..0b82eef42ee7c 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 @@ -14,10 +14,8 @@ import { } from '@elastic/eui'; export function CustomPatternsInput({ value, onChange }) { - const sampleCustomPatterns = ` - POSTFIX_QUEUEID [0-9A-F]{10,11} - MSG message-id=<%{GREEDYDATA}> - `; + const sampleCustomPatterns = `POSTFIX_QUEUEID [0-9A-F]{10,11} +MSG message-id=<%{GREEDYDATA}>`; return ( Date: Tue, 19 Jun 2018 12:37:27 -0700 Subject: [PATCH 05/28] Remove custom CSS --- .../custom_patterns_input/custom_patterns_input.js | 2 ++ .../custom_patterns_input/custom_patterns_input.less | 5 ----- .../grokdebugger/components/event_input/event_input.js | 2 ++ .../grokdebugger/components/event_input/event_input.less | 5 ----- .../grokdebugger/components/event_output/event_output.js | 3 +++ .../grokdebugger/components/event_output/event_output.less | 6 ------ .../grokdebugger/components/pattern_input/pattern_input.js | 2 ++ .../components/pattern_input/pattern_input.less | 5 ----- 8 files changed, 9 insertions(+), 21 deletions(-) delete mode 100644 x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.less delete mode 100644 x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.less delete mode 100644 x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_output/event_output.less delete mode 100644 x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.less 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 0b82eef42ee7c..29f94bfdf87ad 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 @@ -33,6 +33,8 @@ MSG message-id=<%{GREEDYDATA}>`; ); 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/pattern_input/pattern_input.js b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.js index edb632c13f639..24ccf4bcc926e 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 @@ -14,6 +14,8 @@ export function PatternInput({ value, onChange }) { return ( Date: Tue, 19 Jun 2018 12:38:08 -0700 Subject: [PATCH 06/28] Wrap button in EuiFormRow + define isSimulateDisabled --- .../components/grok_debugger/grok_debugger.js | 52 ++++++++++--------- 1 file changed, 28 insertions(+), 24 deletions(-) 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 index 646e7fa5180fd..dcf9fbc402d94 100644 --- 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 @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ import React from 'react'; -import { EuiForm, EuiButton, EuiPanel } from '@elastic/eui'; +import { EuiForm, EuiButton, EuiFormRow } from '@elastic/eui'; import { EventInput } from '../event_input'; import { PatternInput } from '../pattern_input'; import { CustomPatternsInput } from '../custom_patterns_input'; @@ -15,8 +15,7 @@ export class GrokDebugger extends React.Component { rawEvent: '', pattern: '', customPatterns: '', - structuredEvent: '', - isSimulateEnabled: false + structuredEvent: '' }; onRawEventChange = (rawEvent) => { @@ -35,35 +34,40 @@ export class GrokDebugger extends React.Component { console.log('simulate clicked'); } + isSimulateDisabled = () => { + return this.state.rawEvent.trim() === '' + || this.state.pattern.trim() === ''; + } + render() { return ( - - - - - + + + + + Simulate - - - + + + ); } } From 4901a7c20eca50103d9f8dea5d208491468a7090 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Tue, 19 Jun 2018 14:56:26 -0700 Subject: [PATCH 07/28] Wire up simulate --- .../components/event_output/event_output.js | 3 +- .../components/grok_debugger/grok_debugger.js | 53 ++++++++++++++++--- .../directives/grokdebugger/grokdebugger.js | 13 ----- 3 files changed, 47 insertions(+), 22 deletions(-) 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 8f256097317b9..691d60206a458 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 @@ -14,9 +14,10 @@ export function EventOutput({ value }) { return ( 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 index dcf9fbc402d94..f2b0c6a4dac76 100644 --- 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 @@ -9,29 +9,66 @@ 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'; export class GrokDebugger extends React.Component { - state = { - rawEvent: '', - pattern: '', - customPatterns: '', - structuredEvent: '' - }; + 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(); + 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; } - onSimulateClick = () => { - console.log('simulate clicked'); + onSimulateClick = async () => { + try { + const simulateResponse = await this.props.grokdebuggerService.simulate(this.grokdebuggerRequest); + this.setState({ + structuredEvent: simulateResponse.structuredEvent + }); + + if (simulateResponse.error) { + // TODO: toast error + } + } catch (e) { + // TODO: toast error + } } isSimulateDisabled = () => { 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 index ee7ead8a91b05..9601c1a4f54a0 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js @@ -71,19 +71,6 @@ app.directive('grokdebugger', function ($injector) { 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))); - } } }; }); From 78a464e6bc789084c4059cdf1fb8414909c6e2c8 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Tue, 19 Jun 2018 14:57:43 -0700 Subject: [PATCH 08/28] Cleanup --- .../directives/grokdebugger/grokdebugger.js | 53 ------------------- 1 file changed, 53 deletions(-) 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 index 9601c1a4f54a0..c59f1c0ed56e6 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js @@ -6,12 +6,7 @@ import { uiModules } from 'ui/modules'; import 'plugins/grokdebugger/services/grokdebugger'; -import './grokdebugger.less'; import { GrokDebugger } from '../../components/grok_debugger'; -import '../../components/event_input'; -import '../../components/event_output'; -import '../../components/pattern_input'; -import '../../components/custom_patterns_input'; import { render } from 'react-dom'; import React from 'react'; @@ -27,51 +22,3 @@ app.directive('grokdebugger', function ($injector) { } }; }); -/* - 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; - } - } - }; -}); -*/ From 1ee7156e687d0b1e985500bde523ea809c1ce6c9 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 05:09:35 -0700 Subject: [PATCH 09/28] Ace formatting options --- .../custom_patterns_input/custom_patterns_input.js | 4 ++++ .../grokdebugger/components/event_input/event_input.js | 4 ++++ .../grokdebugger/components/event_output/event_output.js | 8 ++++++-- .../components/pattern_input/pattern_input.js | 4 ++++ 4 files changed, 18 insertions(+), 2 deletions(-) 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 29f94bfdf87ad..6520387dc5861 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 @@ -37,6 +37,10 @@ MSG message-id=<%{GREEDYDATA}>`; height="51px" value={value} onChange={onChange} + setOptions={{ + highlightActiveLine: false, + highlightGutterLine: false, + }} data-test-subj="aceCustomPatternsInput" /> 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 050e4ef92c08a..dcfde1f23f840 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 @@ -18,6 +18,10 @@ export function EventInput({ value, onChange }) { height="51px" value={value} onChange={onChange} + setOptions={{ + highlightActiveLine: false, + highlightGutterLine: false, + }} data-test-subj="aceEventInput" /> 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 691d60206a458..4c24ae5f42258 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 @@ -14,12 +14,16 @@ export function EventOutput({ value }) { return ( ); 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 24ccf4bcc926e..6fc7a3d54662d 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 @@ -18,6 +18,10 @@ export function PatternInput({ value, onChange }) { height="51px" value={value} onChange={onChange} + setOptions={{ + highlightActiveLine: false, + highlightGutterLine: false, + }} data-test-subj="acePatternInput" /> From 3b006c0f9002aa2d2810d99034384b571a49bda4 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 06:03:06 -0700 Subject: [PATCH 10/28] Better styling --- .../custom_patterns_input.js | 7 +- .../components/event_input/event_input.js | 2 + .../components/grok_debugger/grok_debugger.js | 72 +++++++++++-------- .../components/pattern_input/pattern_input.js | 2 + 4 files changed, 54 insertions(+), 29 deletions(-) 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 6520387dc5861..d41f27be7f9d5 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 @@ -10,7 +10,8 @@ import { EuiCallOut, EuiCodeBlock, EuiFormRow, - EuiCodeEditor + EuiCodeEditor, + EuiSpacer } from '@elastic/eui'; export function CustomPatternsInput({ value, onChange }) { @@ -31,6 +32,8 @@ MSG message-id=<%{GREEDYDATA}>`; + + `; setOptions={{ highlightActiveLine: false, highlightGutterLine: false, + minLines: 3, + maxLines: 10, }} data-test-subj="aceCustomPatternsInput" /> 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 dcfde1f23f840..249dfbb05f50c 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 @@ -21,6 +21,8 @@ export function EventInput({ value, onChange }) { setOptions={{ highlightActiveLine: false, highlightGutterLine: false, + minLines: 3, + maxLines: 50, }} data-test-subj="aceEventInput" /> 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 index f2b0c6a4dac76..7c1b8d128fbc6 100644 --- 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 @@ -4,7 +4,15 @@ * you may not use this file except in compliance with the Elastic License. */ import React from 'react'; -import { EuiForm, EuiButton, EuiFormRow } from '@elastic/eui'; +import { + EuiForm, + EuiButton, + EuiFormRow, + EuiPage, + EuiPageBody, + EuiPageContent, + EuiPageContentBody +} from '@elastic/eui'; import { EventInput } from '../event_input'; import { PatternInput } from '../pattern_input'; import { CustomPatternsInput } from '../custom_patterns_input'; @@ -78,33 +86,41 @@ export class GrokDebugger extends React.Component { render() { return ( - - - - - - - Simulate - - - - + + + + + + + + + + + Simulate + + + + + + + + ); } } 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 6fc7a3d54662d..343209daa8fb1 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 @@ -21,6 +21,8 @@ export function PatternInput({ value, onChange }) { setOptions={{ highlightActiveLine: false, highlightGutterLine: false, + minLines: 3, + maxLines: 10, }} data-test-subj="acePatternInput" /> From fec1164c89d4f653a0fcdddbfb902bd4513b74ad Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 06:07:33 -0700 Subject: [PATCH 11/28] Adding spacing between custom patterns and simulate button --- .../grokdebugger/components/grok_debugger/grok_debugger.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 index 7c1b8d128fbc6..70b258ccad70e 100644 --- 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 @@ -11,7 +11,8 @@ import { EuiPage, EuiPageBody, EuiPageContent, - EuiPageContentBody + EuiPageContentBody, + EuiSpacer } from '@elastic/eui'; import { EventInput } from '../event_input'; import { PatternInput } from '../pattern_input'; @@ -106,6 +107,7 @@ export class GrokDebugger extends React.Component { value={this.state.customPatterns} onChange={this.onCustomPatternsChange} /> + Date: Wed, 20 Jun 2018 06:19:07 -0700 Subject: [PATCH 12/28] Fixing form row widths --- .../custom_patterns_input/custom_patterns_input.js | 2 +- .../grokdebugger/components/event_input/event_input.js | 5 ++++- .../grokdebugger/components/pattern_input/pattern_input.js | 5 ++++- 3 files changed, 9 insertions(+), 3 deletions(-) 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 d41f27be7f9d5..decefd76e1e33 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 @@ -34,7 +34,7 @@ MSG message-id=<%{GREEDYDATA}>`; - + + + Date: Wed, 20 Jun 2018 06:20:44 -0700 Subject: [PATCH 13/28] Removing form row around button --- .../components/grok_debugger/grok_debugger.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) 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 index 70b258ccad70e..3f78d3b204c22 100644 --- 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 @@ -7,7 +7,6 @@ import React from 'react'; import { EuiForm, EuiButton, - EuiFormRow, EuiPage, EuiPageBody, EuiPageContent, @@ -108,15 +107,14 @@ export class GrokDebugger extends React.Component { onChange={this.onCustomPatternsChange} /> - - - Simulate - - + + Simulate + + From 823a0271760cb96f6ac1be9d3e8bfc82e4aead8b Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 06:22:43 -0700 Subject: [PATCH 14/28] Add indentation/newlines in structured output --- .../grokdebugger/components/event_output/event_output.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 4c24ae5f42258..626cfe61a282e 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 @@ -18,7 +18,7 @@ export function EventOutput({ value }) { isReadOnly width="100%" height="340px" - value={JSON.stringify(value)} + value={JSON.stringify(value, null, 2)} setOptions={{ highlightActiveLine: false, highlightGutterLine: false, From 16e7b6511fb1fa7f3086f48cd78cefae6281052f Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 06:38:30 -0700 Subject: [PATCH 15/28] Error handling --- .../components/grok_debugger/grok_debugger.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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 index 3f78d3b204c22..1c35791dd1113 100644 --- 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 @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ import React from 'react'; +import { isEmpty } from 'lodash'; import { EuiForm, EuiButton, @@ -18,6 +19,7 @@ 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) { @@ -71,11 +73,11 @@ export class GrokDebugger extends React.Component { structuredEvent: simulateResponse.structuredEvent }); - if (simulateResponse.error) { - // TODO: toast error + if (!isEmpty(simulateResponse.error)) { + toastNotifications.addDanger(simulateResponse.error); } } catch (e) { - // TODO: toast error + toastNotifications.addDanger(e); } } From c72e89cc90c0539854ebe0da4a0a5765eb0c7ee1 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 06:52:07 -0700 Subject: [PATCH 16/28] Use constants --- x-pack/plugins/grokdebugger/common/constants/editor.js | 4 +--- .../custom_patterns_input/custom_patterns_input.js | 5 +++-- .../grokdebugger/components/event_input/event_input.js | 5 +++-- .../grokdebugger/components/pattern_input/pattern_input.js | 5 +++-- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/grokdebugger/common/constants/editor.js b/x-pack/plugins/grokdebugger/common/constants/editor.js index a9c74ee18e421..c8a93867207b4 100644 --- a/x-pack/plugins/grokdebugger/common/constants/editor.js +++ b/x-pack/plugins/grokdebugger/common/constants/editor.js @@ -8,7 +8,5 @@ export const EDITOR = { PATTERN_MIN_LINES: 3, PATTERN_MAX_LINES: 10, SAMPLE_DATA_MIN_LINES: 3, - SAMPLE_DATA_MAX_LINES: 50, - SCROLL_MARGIN_TOP_PX: 4, - SCROLL_MARGIN_BOTTOM_PX: 4, + SAMPLE_DATA_MAX_LINES: 50 }; 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 decefd76e1e33..0a5dacfe7a1b0 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 @@ -13,6 +13,7 @@ import { EuiCodeEditor, EuiSpacer } from '@elastic/eui'; +import { EDITOR } from '../../../../../common/constants'; export function CustomPatternsInput({ value, onChange }) { const sampleCustomPatterns = `POSTFIX_QUEUEID [0-9A-F]{10,11} @@ -43,8 +44,8 @@ MSG message-id=<%{GREEDYDATA}>`; setOptions={{ highlightActiveLine: false, highlightGutterLine: false, - minLines: 3, - maxLines: 10, + minLines: EDITOR.PATTERN_MIN_LINES, + maxLines: EDITOR.PATTERN_MAX_LINES, }} data-test-subj="aceCustomPatternsInput" /> 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 5c81769ede5d7..6c9cbe03087fa 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 @@ -9,6 +9,7 @@ import { EuiFormRow, EuiCodeEditor } from '@elastic/eui'; +import { EDITOR } from '../../../../../common/constants'; export function EventInput({ value, onChange }) { return ( @@ -24,8 +25,8 @@ export function EventInput({ value, onChange }) { setOptions={{ highlightActiveLine: false, highlightGutterLine: false, - minLines: 3, - maxLines: 50, + minLines: EDITOR.SAMPLE_DATA_MIN_LINES, + maxLines: EDITOR.SAMPLE_DATA_MAX_LINES }} data-test-subj="aceEventInput" /> 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 d2a35e24b3a0a..240d8af638606 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 @@ -9,6 +9,7 @@ import { EuiFormRow, EuiCodeEditor } from '@elastic/eui'; +import { EDITOR } from '../../../../../common/constants'; export function PatternInput({ value, onChange }) { return ( @@ -24,8 +25,8 @@ export function PatternInput({ value, onChange }) { setOptions={{ highlightActiveLine: false, highlightGutterLine: false, - minLines: 3, - maxLines: 10, + minLines: EDITOR.PATTERN_MIN_LINES, + maxLines: EDITOR.PATTERN_MAX_LINES, }} data-test-subj="acePatternInput" /> From 2919d134752c5af072043d199184e7b288e6e405 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 06:52:14 -0700 Subject: [PATCH 17/28] Removing no-longer-used code --- .../public/lib/ace/apply_editor_options.js | 32 ----------- .../lib/ace/apply_editor_options.test.js | 57 ------------------- .../grokdebugger/public/lib/ace/index.js | 1 - 3 files changed, 90 deletions(-) delete mode 100644 x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.js delete mode 100644 x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.test.js 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'; From b1c13ecaf84ddc1ac2d2f48421c31f3353f8ea2b Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Wed, 20 Jun 2018 10:52:20 -0700 Subject: [PATCH 18/28] Implement syntax highlighting via custom mode --- .../grokdebugger/components/pattern_input/pattern_input.js | 2 ++ .../grokdebugger/directives/grokdebugger/grokdebugger.js | 1 + 2 files changed, 3 insertions(+) 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 240d8af638606..622c71c608f7f 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 @@ -10,6 +10,7 @@ import { EuiCodeEditor } from '@elastic/eui'; import { EDITOR } from '../../../../../common/constants'; +import { GrokMode } from '../../../../lib/ace'; export function PatternInput({ value, onChange }) { return ( @@ -22,6 +23,7 @@ export function PatternInput({ value, onChange }) { height="51px" value={value} onChange={onChange} + mode={new GrokMode()} setOptions={{ highlightActiveLine: false, highlightGutterLine: false, 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 index c59f1c0ed56e6..c9f4dab7dd3c2 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js +++ b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.js @@ -9,6 +9,7 @@ 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'); From c174ad02e6d62a4737bdb0997e8e005607ab1d4c Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Thu, 21 Jun 2018 01:17:58 -0700 Subject: [PATCH 19/28] Making functional tests pass --- .../custom_patterns_input/custom_patterns_input.js | 6 ++++-- .../grokdebugger/components/event_input/event_input.js | 2 +- .../grokdebugger/components/event_output/event_output.js | 6 ++++-- .../components/grok_debugger/grok_debugger.js | 1 + .../components/pattern_input/pattern_input.js | 2 +- x-pack/test/functional/services/grok_debugger.js | 8 ++++---- 6 files changed, 15 insertions(+), 10 deletions(-) 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 0a5dacfe7a1b0..87adb42cc3749 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 @@ -35,7 +35,10 @@ MSG message-id=<%{GREEDYDATA}>`; - + `; minLines: EDITOR.PATTERN_MIN_LINES, maxLines: EDITOR.PATTERN_MAX_LINES, }} - data-test-subj="aceCustomPatternsInput" /> 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 6c9cbe03087fa..caae4673c6b34 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 @@ -16,6 +16,7 @@ export function EventInput({ value, onChange }) { ); 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 626cfe61a282e..6cd6397436243 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 @@ -12,7 +12,10 @@ import { export function EventOutput({ value }) { return ( - + ); 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 index 1c35791dd1113..f6be88fd213a3 100644 --- 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 @@ -113,6 +113,7 @@ export class GrokDebugger extends React.Component { fill onClick={this.onSimulateClick} isDisabled={this.isSimulateDisabled()} + data-test-subj="btnSimulate" > Simulate 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 622c71c608f7f..3a1159544007e 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 @@ -17,6 +17,7 @@ export function PatternInput({ value, onChange }) { ); 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`; From 259679dbd0e6b95b6ab2189278e0352846b30079 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Thu, 21 Jun 2018 01:49:56 -0700 Subject: [PATCH 20/28] Adding trailing comma back --- x-pack/plugins/grokdebugger/common/constants/editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/grokdebugger/common/constants/editor.js b/x-pack/plugins/grokdebugger/common/constants/editor.js index c8a93867207b4..e69ba73be7900 100644 --- a/x-pack/plugins/grokdebugger/common/constants/editor.js +++ b/x-pack/plugins/grokdebugger/common/constants/editor.js @@ -8,5 +8,5 @@ export const EDITOR = { PATTERN_MIN_LINES: 3, PATTERN_MAX_LINES: 10, SAMPLE_DATA_MIN_LINES: 3, - SAMPLE_DATA_MAX_LINES: 50 + SAMPLE_DATA_MAX_LINES: 50, }; From 4e0d690676c27eed3762d0bbb3b1622feb55661b Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Thu, 21 Jun 2018 01:50:12 -0700 Subject: [PATCH 21/28] Removing fixed heights --- .../components/custom_patterns_input/custom_patterns_input.js | 1 - .../sections/grokdebugger/components/event_input/event_input.js | 1 - .../grokdebugger/components/pattern_input/pattern_input.js | 1 - 3 files changed, 3 deletions(-) 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 87adb42cc3749..041606f07a056 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 @@ -41,7 +41,6 @@ MSG message-id=<%{GREEDYDATA}>`; > Date: Thu, 21 Jun 2018 01:50:21 -0700 Subject: [PATCH 22/28] Removing unnecessary styles --- .../directives/grokdebugger/grokdebugger.less | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.less b/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/grokdebugger/grokdebugger.less index ac2b1367e20ed..4425b5e87c35d 100644 --- a/x-pack/plugins/grokdebugger/public/sections/grokdebugger/directives/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, From 30acfd2f92bfb22845f7dcd9977cc80a54f0bb71 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Fri, 22 Jun 2018 05:39:40 -0700 Subject: [PATCH 23/28] Make Event Output form row full width as well --- .../grokdebugger/components/event_output/event_output.js | 1 + 1 file changed, 1 insertion(+) 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 6cd6397436243..decdab61492a3 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 @@ -14,6 +14,7 @@ export function EventOutput({ value }) { return ( Date: Fri, 22 Jun 2018 05:42:32 -0700 Subject: [PATCH 24/28] Wrapping EuiCodeEditors in EuiPanels --- .../custom_patterns_input.js | 25 +++++++++-------- .../components/event_input/event_input.js | 25 +++++++++-------- .../components/event_output/event_output.js | 25 +++++++++-------- .../components/pattern_input/pattern_input.js | 27 ++++++++++--------- 4 files changed, 57 insertions(+), 45 deletions(-) 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 041606f07a056..1b459f6e67504 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 @@ -10,6 +10,7 @@ import { EuiCallOut, EuiCodeBlock, EuiFormRow, + EuiPanel, EuiCodeEditor, EuiSpacer } from '@elastic/eui'; @@ -39,17 +40,19 @@ MSG message-id=<%{GREEDYDATA}>`; fullWidth data-test-subj="aceCustomPatternsInput" > - + + + ); 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 6b2f2c1afab1d..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 @@ -7,6 +7,7 @@ import React from 'react'; import { EuiFormRow, + EuiPanel, EuiCodeEditor } from '@elastic/eui'; import { EDITOR } from '../../../../../common/constants'; @@ -18,17 +19,19 @@ export function EventInput({ value, onChange }) { fullWidth data-test-subj="aceEventInput" > - + + + ); } 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 decdab61492a3..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 @@ -7,6 +7,7 @@ import React from 'react'; import { EuiFormRow, + EuiPanel, EuiCodeEditor } from '@elastic/eui'; @@ -17,17 +18,19 @@ export function EventOutput({ value }) { fullWidth data-test-subj="aceEventOutput" > - + + + ); } 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 76351543ab4f7..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 @@ -7,6 +7,7 @@ import React from 'react'; import { EuiFormRow, + EuiPanel, EuiCodeEditor } from '@elastic/eui'; import { EDITOR } from '../../../../../common/constants'; @@ -19,18 +20,20 @@ export function PatternInput({ value, onChange }) { fullWidth data-test-subj="acePatternInput" > - + + + ); } From 9e429dfc349e4030ef71223f36ad9d172e2a01ec Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Fri, 22 Jun 2018 05:45:01 -0700 Subject: [PATCH 25/28] Adding spacer before callout; making spacing around callout consistent --- .../custom_patterns_input/custom_patterns_input.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 1b459f6e67504..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 @@ -26,6 +26,9 @@ MSG message-id=<%{GREEDYDATA}>`; buttonContent="Custom Patterns" data-test-subj="btnToggleCustomPatternsInput" > + + + @@ -34,7 +37,7 @@ MSG message-id=<%{GREEDYDATA}>`; - + Date: Fri, 22 Jun 2018 05:58:47 -0700 Subject: [PATCH 26/28] Clear out custom patterns from request if field is cleared out --- .../grokdebugger/components/grok_debugger/grok_debugger.js | 1 + 1 file changed, 1 insertion(+) 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 index f6be88fd213a3..28d6c5b025fe9 100644 --- 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 @@ -48,6 +48,7 @@ export class GrokDebugger extends React.Component { customPatterns = customPatterns.trim(); if (!customPatterns) { + this.grokdebuggerRequest.customPatterns = {}; return; } From 68e948f3ac798c6904d584125cb240009f42f784 Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Fri, 22 Jun 2018 05:59:00 -0700 Subject: [PATCH 27/28] Clear out simulation results before attempting simulation --- .../components/grok_debugger/grok_debugger.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) 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 index 28d6c5b025fe9..b4b42678b220d 100644 --- 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 @@ -44,15 +44,16 @@ export class GrokDebugger extends React.Component { } onCustomPatternsChange = (customPatterns) => { + customPatterns = customPatterns.trim(); + const customPatternsObj = {}; + this.setState({ customPatterns }); - customPatterns = customPatterns.trim(); if (!customPatterns) { - this.grokdebuggerRequest.customPatterns = {}; + this.grokdebuggerRequest.customPatterns = customPatternsObj; return; } - const customPatternsObj = {}; customPatterns.split('\n').forEach(customPattern => { // Patterns are defined like so: // patternName patternDefinition @@ -67,7 +68,7 @@ export class GrokDebugger extends React.Component { this.grokdebuggerRequest.customPatterns = customPatternsObj; } - onSimulateClick = async () => { + simulateGrok = async () => { try { const simulateResponse = await this.props.grokdebuggerService.simulate(this.grokdebuggerRequest); this.setState({ @@ -82,6 +83,12 @@ export class GrokDebugger extends React.Component { } } + onSimulateClick = () => { + this.setState({ + structuredEvent: {} + }, this.simulateGrok); + } + isSimulateDisabled = () => { return this.state.rawEvent.trim() === '' || this.state.pattern.trim() === ''; From 4eef208acc96823ffd8ce50e6ed82412245f35ee Mon Sep 17 00:00:00 2001 From: Shaunak Kashyap Date: Fri, 22 Jun 2018 08:08:25 -0700 Subject: [PATCH 28/28] Set state with untrimmed value --- .../grokdebugger/components/grok_debugger/grok_debugger.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index b4b42678b220d..dddb75336edaa 100644 --- 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 @@ -44,11 +44,11 @@ export class GrokDebugger extends React.Component { } onCustomPatternsChange = (customPatterns) => { + this.setState({ customPatterns }); + customPatterns = customPatterns.trim(); const customPatternsObj = {}; - this.setState({ customPatterns }); - if (!customPatterns) { this.grokdebuggerRequest.customPatterns = customPatternsObj; return;