Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Grokdebugger UI improvement #50683

Merged
merged 2 commits into from
Nov 15, 2019
Merged

Grokdebugger UI improvement #50683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c76483c
Removing EuiCode from inside EuiPanel
miukimiu Nov 14, 2019
23c799b
merged master
miukimiu Nov 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 20 additions & 29 deletions ...acy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@ import {
EuiCallOut,
EuiCodeBlock,
EuiFormRow,
EuiPanel,
EuiCodeEditor,
EuiSpacer
EuiSpacer,
} from '@elastic/eui';
import { EDITOR } from '../../../common/constants';
import { FormattedMessage } from '@kbn/i18n/react';
Expand All @@ -24,51 +23,43 @@ MSG message-id=<%{GREEDYDATA}>`;
return (
<EuiAccordion
id="customPatternsInput"
buttonContent={(
buttonContent={
<FormattedMessage
id="xpack.grokDebugger.customPatternsButtonLabel"
defaultMessage="Custom Patterns"
/>
)}
}
data-test-subj="btnToggleCustomPatternsInput"
>

<EuiSpacer size="m" />

<EuiCallOut
title={(
title={
<FormattedMessage
id="xpack.grokDebugger.customPatterns.callOutTitle"
defaultMessage="Enter one custom pattern per line. For example:"
/>
)}
}
>
<EuiCodeBlock>
{ sampleCustomPatterns }
</EuiCodeBlock>
<EuiCodeBlock>{sampleCustomPatterns}</EuiCodeBlock>
</EuiCallOut>

<EuiSpacer size="m" />

<EuiFormRow
fullWidth
data-test-subj="aceCustomPatternsInput"
>
<EuiPanel paddingSize="s">
<EuiCodeEditor
width="100%"
theme="textmate"
mode="text"
value={value}
onChange={onChange}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
minLines: EDITOR.PATTERN_MIN_LINES,
maxLines: EDITOR.PATTERN_MAX_LINES,
}}
/>
</EuiPanel>
<EuiFormRow fullWidth data-test-subj="aceCustomPatternsInput">
<EuiCodeEditor
width="100%"
theme="textmate"
mode="text"
value={value}
onChange={onChange}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
minLines: EDITOR.PATTERN_MIN_LINES,
maxLines: EDITOR.PATTERN_MAX_LINES,
}}
/>
</EuiFormRow>
</EuiAccordion>
);
Expand Down
43 changes: 17 additions & 26 deletions x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,41 +5,32 @@
*/

import React from 'react';
import {
EuiFormRow,
EuiPanel,
EuiCodeEditor
} from '@elastic/eui';
import { EuiFormRow, EuiCodeEditor } from '@elastic/eui';
import { EDITOR } from '../../../common/constants';
import { FormattedMessage } from '@kbn/i18n/react';

export function EventInput({ value, onChange }) {
return (
<EuiFormRow
label={(
<FormattedMessage
id="xpack.grokDebugger.sampleDataLabel"
defaultMessage="Sample Data"
/>
)}
label={
<FormattedMessage id="xpack.grokDebugger.sampleDataLabel" defaultMessage="Sample Data" />
}
fullWidth
data-test-subj="aceEventInput"
>
<EuiPanel paddingSize="s">
<EuiCodeEditor
width="100%"
theme="textmate"
mode="text"
value={value}
onChange={onChange}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
minLines: EDITOR.SAMPLE_DATA_MIN_LINES,
maxLines: EDITOR.SAMPLE_DATA_MAX_LINES
}}
/>
</EuiPanel>
<EuiCodeEditor
width="100%"
theme="textmate"
mode="text"
value={value}
onChange={onChange}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
minLines: EDITOR.SAMPLE_DATA_MIN_LINES,
maxLines: EDITOR.SAMPLE_DATA_MAX_LINES,
}}
/>
</EuiFormRow>
);
}
36 changes: 15 additions & 21 deletions x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,33 @@
*/

import React from 'react';
import {
EuiFormRow,
EuiPanel,
EuiCodeEditor
} from '@elastic/eui';
import { EuiFormRow, EuiCodeEditor } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';

export function EventOutput({ value }) {
return (
<EuiFormRow
label={(
label={
<FormattedMessage
id="xpack.grokDebugger.structuredDataLabel"
defaultMessage="Structured Data"
/>
)}
}
fullWidth
data-test-subj="aceEventOutput"
>
<EuiPanel paddingSize="s">
<EuiCodeEditor
mode="json"
theme="textmate"
isReadOnly
width="100%"
height="340px"
value={JSON.stringify(value, null, 2)}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
}}
/>
</EuiPanel>
<EuiCodeEditor
mode="json"
theme="textmate"
isReadOnly
width="100%"
height="340px"
value={JSON.stringify(value, null, 2)}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
}}
/>
</EuiFormRow>
);
}
43 changes: 17 additions & 26 deletions x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,33 @@
*/

import React from 'react';
import {
EuiFormRow,
EuiPanel,
EuiCodeEditor
} from '@elastic/eui';
import { EuiFormRow, EuiCodeEditor } from '@elastic/eui';
import { EDITOR } from '../../../common/constants';
import { GrokMode } from '../../lib/ace';
import { FormattedMessage } from '@kbn/i18n/react';

export function PatternInput({ value, onChange }) {
return (
<EuiFormRow
label={(
<FormattedMessage
id="xpack.grokDebugger.grokPatternLabel"
defaultMessage="Grok Pattern"
/>
)}
label={
<FormattedMessage id="xpack.grokDebugger.grokPatternLabel" defaultMessage="Grok Pattern" />
}
fullWidth
data-test-subj="acePatternInput"
>
<EuiPanel paddingSize="s">
<EuiCodeEditor
width="100%"
theme="textmate"
value={value}
onChange={onChange}
mode={new GrokMode()}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
minLines: EDITOR.PATTERN_MIN_LINES,
maxLines: EDITOR.PATTERN_MAX_LINES,
}}
/>
</EuiPanel>
<EuiCodeEditor
width="100%"
theme="textmate"
value={value}
onChange={onChange}
mode={new GrokMode()}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
minLines: EDITOR.PATTERN_MIN_LINES,
maxLines: EDITOR.PATTERN_MAX_LINES,
}}
/>
</EuiFormRow>
);
}