EUIFication: Grok Debugger (#20027)

* Move <kbn-dev-tools-app> Angular wrapper directive usage into route template

* Move sole directive into new directives folder

* WIP checkin: basic conversion to React components

* Fix sample custom patterns indentation

* Remove custom CSS

* Wrap button in EuiFormRow + define isSimulateDisabled

* Wire up simulate

* Cleanup

* Ace formatting options

* Better styling

* Adding spacing between custom patterns and simulate button

* Fixing form row widths

* Removing form row around button

* Add indentation/newlines in structured output

* Error handling

* Use constants

* Removing no-longer-used code

* Implement syntax highlighting via custom mode

* Making functional tests pass

* Adding trailing comma back

* Removing fixed heights

* Removing unnecessary styles

* Make Event Output form row full width as well

* Wrapping EuiCodeEditors in EuiPanels

* Adding spacer before callout; making spacing around callout consistent

* Clear out custom patterns from request if field is cleared out

* Clear out simulation results before attempting simulation

* Set state with untrimmed value

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,
 };

x-pack/plugins/grokdebugger/public/lib/ace/index.js

@@ -5,4 +5,3 @@
  */
 
 export { GrokMode } from './grok_mode';
-export { applyEditorOptions } from './apply_editor_options';

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 (
+    <EuiAccordion
+      id="customPatternsInput"
+      buttonContent="Custom Patterns"
+      data-test-subj="btnToggleCustomPatternsInput"
+    >
 
-      onSectionToggle = (sectionId) => {
-        this.isCollapsed[sectionId] = !this.isCollapsed[sectionId];
-      }
+      <EuiSpacer size="m" />
 
-      isSectionCollapsed = (sectionId) => {
-        return this.isCollapsed[sectionId];
-      }
-    }
-  };
-});
+      <EuiCallOut
+        title="Enter one custom pattern per line. For example:"
+      >
+        <EuiCodeBlock>
+          { sampleCustomPatterns }
+        </EuiCodeBlock>
+      </EuiCallOut>
+
+      <EuiSpacer size="m" />
+
+      <EuiFormRow
+        fullWidth
+        data-test-subj="aceCustomPatternsInput"
+      >
+        <EuiPanel paddingSize="s">
+          <EuiCodeEditor
+            width="100%"
+            value={value}
+            onChange={onChange}
+            setOptions={{
+              highlightActiveLine: false,
+              highlightGutterLine: false,
+              minLines: EDITOR.PATTERN_MIN_LINES,
+              maxLines: EDITOR.PATTERN_MAX_LINES,
+            }}
+          />
+        </EuiPanel>
+      </EuiFormRow>
+    </EuiAccordion>
+  );
+}

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';

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 (
+    <EuiFormRow
+      label="Sample Data"
+      fullWidth
+      data-test-subj="aceEventInput"
+    >
+      <EuiPanel paddingSize="s">
+        <EuiCodeEditor
+          width="100%"
+          value={value}
+          onChange={onChange}
+          setOptions={{
+            highlightActiveLine: false,
+            highlightGutterLine: false,
+            minLines: EDITOR.SAMPLE_DATA_MIN_LINES,
+            maxLines: EDITOR.SAMPLE_DATA_MAX_LINES
+          }}
+        />
+      </EuiPanel>
+    </EuiFormRow>
+  );
+}

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';