IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

prometheus: monaco editor: visual fixes (#41184)

Browse Source 
* prometheus: monaco editor: visual fixes

* fixed typo in comment

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>

* more comments added

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>
This commit is contained in:
Gábor Farkas 2021-11-02 12:44:51 +01:00 committed by GitHub
parent c45c246646
commit c788e2f8e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx
View File

@ -15,24 +15,38 @@ const options: monacoTypes.editor.IStandaloneEditorConstructionOptions = {
fixedOverflowWidgets: true, fixedOverflowWidgets: true,
folding: false, folding: false,
fontSize: 14, fontSize: 14,
lineDecorationsWidth: 8, lineDecorationsWidth: 8, // used as "padding-left"
lineNumbers: 'off', lineNumbers: 'off',
minimap: { enabled: false }, minimap: { enabled: false },
overviewRulerBorder: false, overviewRulerBorder: false,
overviewRulerLanes: 0, overviewRulerLanes: 0,
padding: { padding: {
// these numbers were picked so that visually this matches the previous version
// of the query-editor the best
top: 4, top: 4,
bottom: 4, bottom: 5,
}, },
renderLineHighlight: 'none', renderLineHighlight: 'none',
scrollbar: { scrollbar: {
vertical: 'hidden', vertical: 'hidden',
verticalScrollbarSize: 8, // used as "padding-right"
horizontal: 'hidden',
horizontalScrollbarSize: 0,
}, },
scrollBeyondLastLine: false, scrollBeyondLastLine: false,
suggestFontSize: 12, suggestFontSize: 12,
wordWrap: 'off', wordWrap: 'on',
}; };
// this number was chosen by testing various values. it might be necessary
// because of the width of the border, not sure.
//it needs to do 2 things:
// 1. when the editor is single-line, it should make the editor height be visually correct
// 2. when the editor is multi-line, the editor should not be "scrollable" (meaning,
// you do a scroll-movement in the editor, and it will scroll the content by a couple pixels
// up & down. this we want to avoid)
const EDITOR_HEIGHT_OFFSET = 2;
const PROMQL_LANG_ID = promLanguageDefinition.id; const PROMQL_LANG_ID = promLanguageDefinition.id;
// we must only run the promql-setup code once // we must only run the promql-setup code once
@ -157,7 +171,7 @@ const MonacoQueryField = (props: Props) => {
const containerDiv = containerRef.current; const containerDiv = containerRef.current;
if (containerDiv !== null) { if (containerDiv !== null) {
const pixelHeight = editor.getContentHeight(); const pixelHeight = editor.getContentHeight();
containerDiv.style.height = `${pixelHeight}px`; containerDiv.style.height = `${pixelHeight + EDITOR_HEIGHT_OFFSET}px`;
containerDiv.style.width = '100%'; containerDiv.style.width = '100%';
const pixelWidth = containerDiv.clientWidth; const pixelWidth = containerDiv.clientWidth;
editor.layout({ width: pixelWidth, height: pixelHeight }); editor.layout({ width: pixelWidth, height: pixelHeight });