From c788e2f8e8c59b6b4112ad965c1eb0235562cd96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A1bor=20Farkas?= Date: Tue, 2 Nov 2021 12:44:51 +0100 Subject: [PATCH] prometheus: monaco editor: visual fixes (#41184) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * prometheus: monaco editor: visual fixes * fixed typo in comment Co-authored-by: Piotr Jamróz * more comments added Co-authored-by: Piotr Jamróz --- .../monaco-query-field/MonacoQueryField.tsx | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx index 5753baa649b..3f30dafc36c 100644 --- a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx @@ -15,24 +15,38 @@ const options: monacoTypes.editor.IStandaloneEditorConstructionOptions = { fixedOverflowWidgets: true, folding: false, fontSize: 14, - lineDecorationsWidth: 8, + lineDecorationsWidth: 8, // used as "padding-left" lineNumbers: 'off', minimap: { enabled: false }, overviewRulerBorder: false, overviewRulerLanes: 0, padding: { + // these numbers were picked so that visually this matches the previous version + // of the query-editor the best top: 4, - bottom: 4, + bottom: 5, }, renderLineHighlight: 'none', scrollbar: { vertical: 'hidden', + verticalScrollbarSize: 8, // used as "padding-right" + horizontal: 'hidden', + horizontalScrollbarSize: 0, }, scrollBeyondLastLine: false, 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; // we must only run the promql-setup code once @@ -157,7 +171,7 @@ const MonacoQueryField = (props: Props) => { const containerDiv = containerRef.current; if (containerDiv !== null) { const pixelHeight = editor.getContentHeight(); - containerDiv.style.height = `${pixelHeight}px`; + containerDiv.style.height = `${pixelHeight + EDITOR_HEIGHT_OFFSET}px`; containerDiv.style.width = '100%'; const pixelWidth = containerDiv.clientWidth; editor.layout({ width: pixelWidth, height: pixelHeight });