maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Grok Debugger] Better editor expansion/Fix border hiding bottom line (#18752)

Browse source 
* Update to grok debugger editors: let them grow taller and stop hiding half of bottom line input.

* Update custom pattern size to 10 LOC.

* Remove unnecessary options, add constants for scroll margin.

* Encapsulate editor options in mutate function.

* Move editor helper file and prefer "function" declaration over ES6 const.

* Add test for new helper function.
This commit is contained in:
Justin Kambic 2018-05-04 12:20:36 -04:00 committed by GitHub
parent 5722c84b2d
commit 38fd6066f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 145 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
x-pack/plugins/grokdebugger/common/constants/editor.js Normal file
View file

@ -0,0 +1,14 @@
/*
* 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 const EDITOR = {
PATTERN_MIN_LINES: 3,
PATTERN_MAX_LINES: 10,
SAMPLE_DATA_MIN_LINES: 3,
SAMPLE_DATA_MAX_LINES: 50,
SCROLL_MARGIN_TOP: 4,
SCROLL_MARGIN_BOTTOM: 4,
};

1
x-pack/plugins/grokdebugger/common/constants/index.js
View file

@ -6,3 +6,4 @@
export { ROUTES } from './routes';
export { PLUGIN } from './plugin';
export { EDITOR } from './editor';

32
x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.js Normal file
View file

@ -0,0 +1,32 @@
/*
* 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,
EDITOR.SCROLL_MARGIN_BOTTOM,
0,
0
);
editor.setOptions({
highlightActiveLine: false,
highlightGutterLine: false,
minLines,
maxLines
});
editor.$blockScrolling = Infinity;
}

57
x-pack/plugins/grokdebugger/public/lib/ace/apply_editor_options.test.js Normal file
View file

@ -0,0 +1,57 @@
/*
* 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);
expect(setScrollMargin.mock.calls[0][1]).toEqual(EDITOR.SCROLL_MARGIN_BOTTOM);
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);
});
});

18
x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/custom_patterns_input/custom_patterns_input.html
View file

@ -22,15 +22,17 @@ MSG message-id=<%{GREEDYDATA}></code></pre>
</div>
</div>
</div>
<div
class="custom-patterns-input-editor grokdebugger-ace-editor kuiVerticalRhythm"
require-keys="true"
ui-ace="{
onLoad: aceLoaded
}"
ng-model="customPatternsInput.customPatterns"
data-test-subj="aceCustomPatternsInput"
<div class="grokdebugger-ace-editor">
<div
class="custom-patterns-input-editor kuiVerticalRhythm"
require-keys="true"
ui-ace="{
onLoad: aceLoaded
}"
ng-model="customPatternsInput.customPatterns"
data-test-subj="aceCustomPatternsInput"
></div>
</div>
</div>
</toggle-panel>
</form>

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

@ -6,6 +6,8 @@
import { uiModules } from 'ui/modules';
import { InitAfterBindingsWorkaround } from 'ui/compat';
import { EDITOR } from '../../../../../common/constants';
import { applyEditorOptions } from '../../../../lib/ace/apply_editor_options';
import template from './custom_patterns_input.html';
import './custom_patterns_input.less';
import 'ui/toggle_panel';
@ -32,14 +34,7 @@ app.directive('customPatternsInput', function () {
});
$scope.aceLoaded = (editor) => {
this.editor = editor;
editor.getSession().setUseWrapMode(true);
editor.setOptions({
highlightActiveLine: false,
highlightGutterLine: false,
minLines: 3,
maxLines: 25
});
editor.$blockScrolling = Infinity;
applyEditorOptions(editor, EDITOR.PATTERN_MIN_LINES, EDITOR.PATTERN_MAX_LINES);
};
}

20
x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/event_input/event_input.html
View file

@ -3,14 +3,16 @@
<label class="kuiLabel kuiVerticalRhythmSmall">
Sample Data
</label>
<div
class="event-input-editor grokdebugger-ace-editor kuiVerticalRhythmSmall"
require-keys="true"
ui-ace="{
onLoad: aceLoaded
}"
ng-model="eventInput.rawEvent"
data-test-subj="aceEventInput"
></div>
<div class="grokdebugger-ace-editor">
<div
class="event-input-editor kuiVerticalRhythmSmall"
require-keys="true"
ui-ace="{
onLoad: aceLoaded
}"
ng-model="eventInput.rawEvent"
data-test-subj="aceEventInput"
></div>
</div>
</div>
</form>

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

@ -5,6 +5,8 @@
*/
import { uiModules } from 'ui/modules';
import { EDITOR } from '../../../../../common/constants';
import { applyEditorOptions } from '../../../../lib/ace/apply_editor_options';
import template from './event_input.html';
import './event_input.less';
import 'ace';
@ -27,14 +29,7 @@ app.directive('eventInput', function () {
});
$scope.aceLoaded = (editor) => {
this.editor = editor;
editor.getSession().setUseWrapMode(true);
editor.setOptions({
highlightActiveLine: false,
highlightGutterLine: false,
minLines: 3,
maxLines: 10
});
editor.$blockScrolling = Infinity;
applyEditorOptions(editor, EDITOR.SAMPLE_DATA_MIN_LINES, EDITOR.SAMPLE_DATA_MAX_LINES);
};
}
}

20
x-pack/plugins/grokdebugger/public/sections/grokdebugger/components/pattern_input/pattern_input.html
View file

@ -3,14 +3,16 @@
<label class="kuiLabel kuiVerticalRhythmSmall">
Grok Pattern
</label>
<div
class="pattern-input-editor grokdebugger-ace-editor kuiVerticalRhythmSmall"
require-keys="true"
ui-ace="{
onLoad: aceLoaded
}"
ng-model="patternInput.pattern"
data-test-subj="acePatternInput"
></div>
<div class="grokdebugger-ace-editor">
<div
class="pattern-input-editor kuiVerticalRhythmSmall"
require-keys="true"
ui-ace="{
onLoad: aceLoaded
}"
ng-model="patternInput.pattern"
data-test-subj="acePatternInput"
></div>
</div>
</div>
</form>

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

@ -5,6 +5,8 @@
*/
import { uiModules } from 'ui/modules';
import { EDITOR } from '../../../../../common/constants';
import { applyEditorOptions } from '../../../../lib/ace/apply_editor_options';
import template from './pattern_input.html';
import './pattern_input.less';
import { GrokMode } from '../../../../lib/ace';
@ -27,14 +29,7 @@ app.directive('patternInput', function () {
});
$scope.aceLoaded = (editor) => {
this.editor = editor;
editor.getSession().setUseWrapMode(true);
editor.setOptions({
highlightActiveLine: false,
highlightGutterLine: false,
minLines: 3,
maxLines: 10
});
editor.$blockScrolling = Infinity;
applyEditorOptions(editor, EDITOR.PATTERN_MIN_LINES, EDITOR.PATTERN_MAX_LINES);
editor.getSession().setMode(new GrokMode());
};
}