github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Grok] Migrate code editors to monaco (#155492)

Browse source
This commit is contained in:
Ignacio Rivas 2023-04-25 14:26:18 +02:00 • committed by GitHub
parent c3ccede36e
commit a04ad04dd5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 58 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

3
x-pack/plugins/grokdebugger/kibana.jsonc
View file

@ -16,8 +16,7 @@
"devTools"
],
"requiredBundles": [
"kibanaReact",
"esUiShared"
"kibanaReact"
]
}
}

24
x-pack/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
View file

@ -6,11 +6,11 @@
*/
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiAccordion, EuiCallOut, EuiCodeBlock, EuiFormRow, EuiSpacer } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { EDITOR } from '../../../common/constants';
import { EuiCodeEditor } from '../../shared_imports';
import { CodeEditor } from '@kbn/kibana-react-plugin/public';
export function CustomPatternsInput({ value, onChange }) {
const sampleCustomPatterns = `POSTFIX_QUEUEID [0-9A-F]{10,11}
@ -43,18 +43,18 @@ MSG message-id=<%{GREEDYDATA}>`;
<EuiSpacer size="m" />
<EuiFormRow fullWidth data-test-subj="aceCustomPatternsInput">
<EuiCodeEditor
width="100%"
theme="textmate"
mode="text"
<CodeEditor
languageId="plaintext"
value={value}
onChange={onChange}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
minLines: EDITOR.PATTERN_MIN_LINES,
maxLines: EDITOR.PATTERN_MAX_LINES,
height={200}
options={{
tabSize: 2,
automaticLayout: true,
}}
aria-label={i18n.translate('xpack.grokDebugger.customPatternsInput', {
defaultMessage: 'Code editor for inputting custom patterns',
})}
onChange={onChange}
/>
</EuiFormRow>
</EuiAccordion>

27
x-pack/plugins/grokdebugger/public/components/event_input/event_input.js
View file

@ -6,11 +6,10 @@
*/
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFormRow } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { EDITOR } from '../../../common/constants';
import { EuiCodeEditor } from '../../shared_imports';
import { CodeEditor } from '@kbn/kibana-react-plugin/public';
export function EventInput({ value, onChange }) {
return (
@ -19,20 +18,20 @@ export function EventInput({ value, onChange }) {
<FormattedMessage id="xpack.grokDebugger.sampleDataLabel" defaultMessage="Sample Data" />
}
fullWidth
data-test-subj="aceEventInput"
data-test-subj="eventInput"
>
<EuiCodeEditor
width="100%"
theme="textmate"
mode="text"
<CodeEditor
languageId="plaintext"
value={value}
onChange={onChange}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
minLines: EDITOR.SAMPLE_DATA_MIN_LINES,
maxLines: EDITOR.SAMPLE_DATA_MAX_LINES,
height={200}
options={{
tabSize: 2,
automaticLayout: true,
}}
aria-label={i18n.translate('xpack.grokDebugger.eventInputEditor', {
defaultMessage: 'Code editor for event inputs',
})}
onChange={onChange}
/>
</EuiFormRow>
);

25
x-pack/plugins/grokdebugger/public/components/event_output/event_output.js
View file

@ -6,11 +6,9 @@
*/
import React from 'react';
import { EuiFormRow } from '@elastic/eui';
import { EuiFormRow, EuiCodeBlock } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiCodeEditor } from '../../shared_imports';
export function EventOutput({ value }) {
return (
<EuiFormRow
@ -21,20 +19,15 @@ export function EventOutput({ value }) {
/>
}
fullWidth
data-test-subj="aceEventOutput"
>
<EuiCodeEditor
mode="json"
theme="textmate"
isReadOnly
width="100%"
height="340px"
value={JSON.stringify(value, null, 2)}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
}}
/>
<EuiCodeBlock
paddingSize="m"
language="json"
isCopyable
data-test-subj="eventOutputCodeBlock"
>
{JSON.stringify(value, null, 2)}
</EuiCodeBlock>
</EuiFormRow>
);
}

10
x-pack/plugins/grokdebugger/public/components/grok_debugger/brace_imports.ts
View file

@ -1,10 +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
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import 'brace/mode/json';
import 'brace/mode/text';
import 'brace/theme/textmate';

1
x-pack/plugins/grokdebugger/public/components/grok_debugger/grok_debugger.js
View file

@ -11,7 +11,6 @@ import { i18n } from '@kbn/i18n';
// eslint-disable-next-line no-restricted-imports
import isEmpty from 'lodash/isEmpty';
import './brace_imports';
import {
EuiForm,
EuiButton,

28
x-pack/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
View file

@ -6,12 +6,10 @@
*/
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFormRow } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { EDITOR } from '../../../common/constants';
import { EuiCodeEditor } from '../../shared_imports';
import { GrokMode } from '../../lib/ace';
import { CodeEditor } from '@kbn/kibana-react-plugin/public';
export function PatternInput({ value, onChange }) {
return (
@ -20,20 +18,20 @@ export function PatternInput({ value, onChange }) {
<FormattedMessage id="xpack.grokDebugger.grokPatternLabel" defaultMessage="Grok Pattern" />
}
fullWidth
data-test-subj="acePatternInput"
data-test-subj="patternInput"
>
<EuiCodeEditor
width="100%"
theme="textmate"
<CodeEditor
languageId="plaintext"
value={value}
onChange={onChange}
mode={new GrokMode()}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
minLines: EDITOR.PATTERN_MIN_LINES,
maxLines: EDITOR.PATTERN_MAX_LINES,
height={200}
options={{
tabSize: 2,
automaticLayout: true,
}}
aria-label={i18n.translate('xpack.grokDebugger.grokPatternAriaLabel', {
defaultMessage: 'Code editor for inputting the grok pattern',
})}
onChange={onChange}
/>
</EuiFormRow>
);

45
x-pack/plugins/grokdebugger/public/lib/ace/grok_highlight_rules.js
View file

@ -1,45 +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
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import ace from 'brace';
const { TextHighlightRules } = ace.acequire('ace/mode/text_highlight_rules');
export class GrokHighlightRules extends TextHighlightRules {
constructor() {
super();
this.$rules = {
start: [
{
token: ['grokStart', 'grokPatternName', 'grokSeparator', 'grokFieldName', 'grokEnd'],
regex: '(%{)([^:]+)(:)([^:]+)(})',
},
{
token: [
'grokStart',
'grokPatternName',
'grokSeparator',
'grokFieldName',
'grokSeparator',
'grokFieldType',
'grokEnd',
],
regex: '(%{)([^:]+)(:)([^:]+)(:)([^:]+)(})',
},
{
token: (escapeToken /* regexToken */) => {
if (escapeToken) {
return ['grokEscape', 'grokEscaped'];
}
return 'grokRegex';
},
regex: '(\\\\)?([\\[\\]\\(\\)\\?\\:\\|])',
},
],
};
}
}

18
x-pack/plugins/grokdebugger/public/lib/ace/grok_mode.js
View file

@ -1,18 +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
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import ace from 'brace';
import { GrokHighlightRules } from './grok_highlight_rules';
const TextMode = ace.acequire('ace/mode/text').Mode;
export class GrokMode extends TextMode {
constructor() {
super();
this.HighlightRules = GrokHighlightRules;
}
}

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

@ -1,8 +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
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
export { GrokMode } from './grok_mode';

2
x-pack/plugins/grokdebugger/public/shared_imports.ts
View file

@ -5,6 +5,4 @@
* 2.0.
*/
export { EuiCodeEditor } from '@kbn/es-ui-shared-plugin/public';
export { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';

21
x-pack/test/functional/page_objects/grok_debugger_page.ts
View file

@ -9,7 +9,7 @@ import { FtrService } from '../ftr_provider_context';
export class GrokDebuggerPageObject extends FtrService {
private readonly testSubjects = this.ctx.getService('testSubjects');
private readonly aceEditor = this.ctx.getService('aceEditor');
private readonly monacoEditor = this.ctx.getService('monacoEditor');
private readonly retry = this.ctx.getService('retry');
async simulateButton() {
@ -17,30 +17,19 @@ export class GrokDebuggerPageObject extends FtrService {
}
async getEventOutput() {
return await this.aceEditor.getValue(
'grokDebuggerContainer > aceEventOutput > codeEditorContainer'
);
return await this.testSubjects.getVisibleText('eventOutputCodeBlock');
}
async setEventInput(value: string) {
await this.aceEditor.setValue(
'grokDebuggerContainer > aceEventInput > codeEditorContainer',
value
);
await this.monacoEditor.setCodeEditorValue(value, 0);
}
async setPatternInput(pattern: string) {
await this.aceEditor.setValue(
'grokDebuggerContainer > acePatternInput > codeEditorContainer',
pattern
);
await this.monacoEditor.setCodeEditorValue(pattern, 1);
}
async setCustomPatternInput(customPattern: string) {
await this.aceEditor.setValue(
'grokDebuggerContainer > aceCustomPatternsInput > codeEditorContainer',
customPattern
);
await this.monacoEditor.setCodeEditorValue(customPattern, 2);
}
async toggleSetCustomPattern() {

14
x-pack/test/functional/services/grok_debugger.js
View file

@ -8,18 +8,14 @@
import expect from '@kbn/expect';
export function GrokDebuggerProvider({ getService }) {
const aceEditor = getService('aceEditor');
const testSubjects = getService('testSubjects');
const retry = getService('retry');
const monacoEditor = getService('monacoEditor');
// test subject selectors
const SUBJ_CONTAINER = 'grokDebuggerContainer';
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`;
@ -29,11 +25,11 @@ export function GrokDebuggerProvider({ getService }) {
}
async setEventInput(value) {
await aceEditor.setValue(SUBJ_UI_ACE_EVENT_INPUT, value);
await monacoEditor.setCodeEditorValue(value, 0);
}
async setPatternInput(value) {
await aceEditor.setValue(SUBJ_UI_ACE_PATTERN_INPUT, value);
await monacoEditor.setCodeEditorValue(value, 1);
}
async toggleCustomPatternsInput() {
@ -41,11 +37,11 @@ export function GrokDebuggerProvider({ getService }) {
}
async setCustomPatternsInput(value) {
await aceEditor.setValue(SUBJ_UI_ACE_CUSTOM_PATTERNS_INPUT, value);
await monacoEditor.setCodeEditorValue(value, 2);
}
async getEventOutput() {
return await aceEditor.getValue(SUBJ_UI_ACE_EVENT_OUTPUT);
return await testSubjects.getVisibleText('eventOutputCodeBlock');
}
async assertExists() {