mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
[Logstash] Migrate code editor to monaco (#162691)
This commit is contained in:
Ignacio Rivas
GitHub
parent
898d8f6a7f
commit
d7e6f076cf
6 changed files with 71 additions and 76 deletions
|
|
@ -21,7 +21,6 @@
|
|||
"security"
|
||||
],
|
||||
"requiredBundles": [
|
||||
"esUiShared",
|
||||
"kibanaReact"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,21 +90,21 @@ exports[`PipelineEditor component includes required error message for falsy pipe
|
|||
labelType="label"
|
||||
>
|
||||
<div
|
||||
data-test-subj="acePipeline"
|
||||
data-test-subj="pipelineField"
|
||||
>
|
||||
<EuiCodeEditor
|
||||
mode="plain_text"
|
||||
<CodeEditor
|
||||
aria-label="Pipeline editor"
|
||||
height={500}
|
||||
languageId="text"
|
||||
onChange={[Function]}
|
||||
setOptions={
|
||||
options={
|
||||
Object {
|
||||
"maxLines": Infinity,
|
||||
"minLines": 25,
|
||||
"readOnly": false,
|
||||
"automaticLayout": true,
|
||||
"lineNumbers": "on",
|
||||
"tabSize": 2,
|
||||
}
|
||||
}
|
||||
theme="github"
|
||||
value="input { stdin { } } filter { } output { stdout { } }"
|
||||
width="1017"
|
||||
/>
|
||||
</div>
|
||||
</EuiFormRow>
|
||||
|
|
@ -381,21 +381,21 @@ exports[`PipelineEditor component invalidates form for invalid pipeline id input
|
|||
labelType="label"
|
||||
>
|
||||
<div
|
||||
data-test-subj="acePipeline"
|
||||
data-test-subj="pipelineField"
|
||||
>
|
||||
<EuiCodeEditor
|
||||
mode="plain_text"
|
||||
<CodeEditor
|
||||
aria-label="Pipeline editor"
|
||||
height={500}
|
||||
languageId="text"
|
||||
onChange={[Function]}
|
||||
setOptions={
|
||||
options={
|
||||
Object {
|
||||
"maxLines": Infinity,
|
||||
"minLines": 25,
|
||||
"readOnly": false,
|
||||
"automaticLayout": true,
|
||||
"lineNumbers": "on",
|
||||
"tabSize": 2,
|
||||
}
|
||||
}
|
||||
theme="github"
|
||||
value="input { stdin { } } filter { } output { stdout { } }"
|
||||
width="1017"
|
||||
/>
|
||||
</div>
|
||||
</EuiFormRow>
|
||||
|
|
@ -672,21 +672,21 @@ exports[`PipelineEditor component invalidates form for pipeline id with spaces 1
|
|||
labelType="label"
|
||||
>
|
||||
<div
|
||||
data-test-subj="acePipeline"
|
||||
data-test-subj="pipelineField"
|
||||
>
|
||||
<EuiCodeEditor
|
||||
mode="plain_text"
|
||||
<CodeEditor
|
||||
aria-label="Pipeline editor"
|
||||
height={500}
|
||||
languageId="text"
|
||||
onChange={[Function]}
|
||||
setOptions={
|
||||
options={
|
||||
Object {
|
||||
"maxLines": Infinity,
|
||||
"minLines": 25,
|
||||
"readOnly": false,
|
||||
"automaticLayout": true,
|
||||
"lineNumbers": "on",
|
||||
"tabSize": 2,
|
||||
}
|
||||
}
|
||||
theme="github"
|
||||
value="input { stdin { } } filter { } output { stdout { } }"
|
||||
width="1017"
|
||||
/>
|
||||
</div>
|
||||
</EuiFormRow>
|
||||
|
|
@ -934,21 +934,21 @@ exports[`PipelineEditor component matches snapshot for clone pipeline 1`] = `
|
|||
labelType="label"
|
||||
>
|
||||
<div
|
||||
data-test-subj="acePipeline"
|
||||
data-test-subj="pipelineField"
|
||||
>
|
||||
<EuiCodeEditor
|
||||
mode="plain_text"
|
||||
<CodeEditor
|
||||
aria-label="Pipeline editor"
|
||||
height={500}
|
||||
languageId="text"
|
||||
onChange={[Function]}
|
||||
setOptions={
|
||||
options={
|
||||
Object {
|
||||
"maxLines": Infinity,
|
||||
"minLines": 25,
|
||||
"readOnly": false,
|
||||
"automaticLayout": true,
|
||||
"lineNumbers": "on",
|
||||
"tabSize": 2,
|
||||
}
|
||||
}
|
||||
theme="github"
|
||||
value="input { stdin { } } filter { } output { stdout { } }"
|
||||
width="1017"
|
||||
/>
|
||||
</div>
|
||||
</EuiFormRow>
|
||||
|
|
@ -1236,21 +1236,21 @@ exports[`PipelineEditor component matches snapshot for create pipeline 1`] = `
|
|||
labelType="label"
|
||||
>
|
||||
<div
|
||||
data-test-subj="acePipeline"
|
||||
data-test-subj="pipelineField"
|
||||
>
|
||||
<EuiCodeEditor
|
||||
mode="plain_text"
|
||||
<CodeEditor
|
||||
aria-label="Pipeline editor"
|
||||
height={500}
|
||||
languageId="text"
|
||||
onChange={[Function]}
|
||||
setOptions={
|
||||
options={
|
||||
Object {
|
||||
"maxLines": Infinity,
|
||||
"minLines": 25,
|
||||
"readOnly": false,
|
||||
"automaticLayout": true,
|
||||
"lineNumbers": "on",
|
||||
"tabSize": 2,
|
||||
}
|
||||
}
|
||||
theme="github"
|
||||
value="input { stdin { } } filter { } output { stdout { } }"
|
||||
width="1017"
|
||||
/>
|
||||
</div>
|
||||
</EuiFormRow>
|
||||
|
|
@ -1498,21 +1498,21 @@ exports[`PipelineEditor component matches snapshot for edit pipeline 1`] = `
|
|||
labelType="label"
|
||||
>
|
||||
<div
|
||||
data-test-subj="acePipeline"
|
||||
data-test-subj="pipelineField"
|
||||
>
|
||||
<EuiCodeEditor
|
||||
mode="plain_text"
|
||||
<CodeEditor
|
||||
aria-label="Pipeline editor"
|
||||
height={500}
|
||||
languageId="text"
|
||||
onChange={[Function]}
|
||||
setOptions={
|
||||
options={
|
||||
Object {
|
||||
"maxLines": Infinity,
|
||||
"minLines": 25,
|
||||
"readOnly": false,
|
||||
"automaticLayout": true,
|
||||
"lineNumbers": "on",
|
||||
"tabSize": 2,
|
||||
}
|
||||
}
|
||||
theme="github"
|
||||
value="input { stdin { } } filter { } output { stdout { } }"
|
||||
width="1017"
|
||||
/>
|
||||
</div>
|
||||
</EuiFormRow>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,9 @@ import { PropTypes } from 'prop-types';
|
|||
import { injectI18n, FormattedMessage } from '@kbn/i18n-react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import 'brace/mode/plain_text';
|
||||
import 'brace/theme/github';
|
||||
|
||||
import { isEmpty } from 'lodash';
|
||||
import { TOOLTIPS } from '../../../../common/constants/tooltips';
|
||||
import { EuiCodeEditor } from '@kbn/es-ui-shared-plugin/public';
|
||||
import { CodeEditor } from '@kbn/kibana-react-plugin/public';
|
||||
import {
|
||||
EuiButton,
|
||||
EuiButtonEmpty,
|
||||
|
|
@ -324,18 +321,20 @@ class PipelineEditorUi extends React.Component {
|
|||
/>
|
||||
}
|
||||
>
|
||||
<div data-test-subj="acePipeline">
|
||||
<EuiCodeEditor
|
||||
mode="plain_text"
|
||||
onChange={this.onPipelineChange}
|
||||
setOptions={{
|
||||
minLines: 25,
|
||||
maxLines: Infinity,
|
||||
readOnly: this.props.licenseService.isReadOnly,
|
||||
}}
|
||||
theme="github"
|
||||
<div data-test-subj="pipelineField">
|
||||
<CodeEditor
|
||||
languageId="text"
|
||||
value={this.state.pipeline.pipeline}
|
||||
width={'1017'}
|
||||
height={500}
|
||||
options={{
|
||||
lineNumbers: 'on',
|
||||
tabSize: 2,
|
||||
automaticLayout: true,
|
||||
}}
|
||||
aria-label={i18n.translate('xpack.logstash.pipelineEditor.pipelineEditorField', {
|
||||
defaultMessage: 'Pipeline editor',
|
||||
})}
|
||||
onChange={this.onPipelineChange}
|
||||
/>
|
||||
</div>
|
||||
</EuiFormRow>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
|
||||
import React from 'react';
|
||||
import { shallowWithIntl } from '@kbn/test-jest-helpers';
|
||||
import 'brace';
|
||||
import { PipelineEditor } from './pipeline_editor';
|
||||
|
||||
describe('PipelineEditor component', () => {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
"@kbn/kibana-react-plugin",
|
||||
"@kbn/i18n-react",
|
||||
"@kbn/test-jest-helpers",
|
||||
"@kbn/es-ui-shared-plugin",
|
||||
"@kbn/config-schema",
|
||||
"@kbn/shared-ux-router",
|
||||
],
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import expect from '@kbn/expect';
|
|||
|
||||
export function PipelineEditorProvider({ getService }) {
|
||||
const retry = getService('retry');
|
||||
const aceEditor = getService('aceEditor');
|
||||
const monacoEditor = getService('monacoEditor');
|
||||
const testSubjects = getService('testSubjects');
|
||||
|
||||
// test subject selectors
|
||||
|
|
@ -17,7 +17,6 @@ export function PipelineEditorProvider({ getService }) {
|
|||
const getContainerSubjForId = (id) => `~pipelineEdit-${id}`;
|
||||
const SUBJ_INPUT_ID = '~pipelineEdit > inputId';
|
||||
const SUBJ_INPUT_DESCRIPTION = '~pipelineEdit > inputDescription';
|
||||
const SUBJ_UI_ACE_PIPELINE = '~pipelineEdit > acePipeline';
|
||||
|
||||
const SUBJ_INPUT_WORKERS = '~pipelineEdit > inputWorkers';
|
||||
const SUBJ_INPUT_BATCH_SIZE = '~pipelineEdit > inputBatchSize';
|
||||
|
|
@ -64,7 +63,7 @@ export function PipelineEditorProvider({ getService }) {
|
|||
await testSubjects.setValue(SUBJ_INPUT_DESCRIPTION, value);
|
||||
}
|
||||
async setPipeline(value) {
|
||||
await aceEditor.setValue(SUBJ_UI_ACE_PIPELINE, value);
|
||||
await monacoEditor.setCodeEditorValue(value, 0);
|
||||
}
|
||||
async setWorkers(value) {
|
||||
await testSubjects.setValue(SUBJ_INPUT_WORKERS, value);
|
||||
|
|
@ -127,7 +126,7 @@ export function PipelineEditorProvider({ getService }) {
|
|||
const values = await Promise.all([
|
||||
testSubjects.getAttribute(SUBJ_INPUT_ID, 'value'),
|
||||
testSubjects.getAttribute(SUBJ_INPUT_DESCRIPTION, 'value'),
|
||||
aceEditor.getValue(SUBJ_UI_ACE_PIPELINE),
|
||||
monacoEditor.getCodeEditorValue(),
|
||||
testSubjects.getAttribute(SUBJ_INPUT_WORKERS, 'value'),
|
||||
testSubjects.getAttribute(SUBJ_INPUT_BATCH_SIZE, 'value'),
|
||||
testSubjects.getAttribute(SUBJ_SELECT_QUEUE_TYPE, 'value'),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue