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

grafana-ui: simplify and centralize monaco-theme-handling (#40643)

Browse Source 
* grafana-ui: simplify and centralize monaco-theme-handling

* simplify code

* monaco: better theme-setup code

* eslint fix

* fix useEffect dependency
This commit is contained in:
Gábor Farkas
2021-10-25 14:55:39 +02:00
committed by GitHub
parent 57750639cd
commit b5ae62d6ae
6 changed files with 56 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -51,23 +51,6 @@ function ensurePromQL(monaco: Monaco) {
}
}
const THEME_NAME = 'grafana-prometheus-query-field';
let MONACO_THEME_SETUP_STARTED = false;
function ensureMonacoTheme(monaco: Monaco, theme: GrafanaTheme2) {
if (MONACO_THEME_SETUP_STARTED === false) {
MONACO_THEME_SETUP_STARTED = true;
monaco.editor.defineTheme(THEME_NAME, {
base: theme.isDark ? 'vs-dark' : 'vs',
inherit: true,
colors: {
'editor.background': theme.components.input.background,
},
rules: [],
});
}
}
const getStyles = (theme: GrafanaTheme2) => {
return {
container: css`
@@ -106,11 +89,9 @@ const MonacoQueryField = (props: Props) => {
<ReactMonacoEditor
options={options}
language="promql"
theme={THEME_NAME}
value={initialValue}
beforeMount={(monaco) => {
ensurePromQL(monaco);
ensureMonacoTheme(monaco, theme);
}}
onMount={(editor, monaco) => {
// we setup on-blur