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: Fix cursor jump in prometheus code editor (#100273)

Browse Source 
* set save view state prop

* remove custom onChange function
This commit is contained in:
ismail simsek 2025-02-11 16:55:54 +01:00 committed by GitHub
parent a8b98ded66
commit c15c9f8af6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 6 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryField.tsx
View File

@ -1,7 +1,6 @@
// Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx
import { css } from '@emotion/css';
import { parser } from '@prometheus-io/lezer-promql';
import { debounce } from 'lodash';
import { promLanguageDefinition } from 'monaco-promql';
import { useEffect, useRef } from 'react';
import { useLatest } from 'react-use';
@ -106,13 +105,12 @@ const MonacoQueryField = (props: Props) => {
// we need only one instance of `overrideServices` during the lifetime of the react component
const overrideServicesRef = useRef(getOverrideServices());
const containerRef = useRef<HTMLDivElement>(null);
const { languageProvider, history, onBlur, onRunQuery, initialValue, placeholder, onChange, datasource } = props;
const { languageProvider, history, onBlur, onRunQuery, initialValue, placeholder, datasource } = props;
const lpRef = useLatest(languageProvider);
const historyRef = useLatest(history);
const onRunQueryRef = useLatest(onRunQuery);
const onBlurRef = useLatest(onBlur);
const onChangeRef = useLatest(onChange);
const autocompleteDisposeFun = useRef<(() => void) | null>(null);
@ -134,6 +132,8 @@ const MonacoQueryField = (props: Props) => {
ref={containerRef}
>
<ReactMonacoEditor
// see https://github.com/suren-atoyan/monaco-react/issues/365
saveViewState
overrideServices={overrideServicesRef.current}
options={options}
language="promql"
@ -201,23 +201,6 @@ const MonacoQueryField = (props: Props) => {
editor.onDidContentSizeChange(updateElementHeight);
updateElementHeight();
// Whenever the editor changes, lets save the last value so the next query for this editor will be up-to-date.
// This change is being introduced to fix a bug where you can submit a query via shift+enter:
// If you clicked into another field and haven't un-blurred the active field,
// then the query that is run will be stale, as the reference is only updated
// with the value of the last blurred input.
// This can run quite slowly, so we're debouncing this which should accomplish two things
// 1. Should prevent this function from blocking the current call stack by pushing into the web API callback queue
// 2. Should prevent a bunch of duplicates of this function being called as the user is typing
const updateCurrentEditorValue = debounce(() => {
const editorValue = editor.getValue();
onChangeRef.current(editorValue);
}, lpRef.current.datasource.getDebounceTimeInMilliseconds());
editor.getModel()?.onDidChangeContent(() => {
updateCurrentEditorValue();
});
// handle: shift + enter
// FIXME: maybe move this functionality into CodeEditor?
editor.addCommand(
@ -235,9 +218,8 @@ const MonacoQueryField = (props: Props) => {
command: null,
});
/* Something in this configuration of monaco doesn't bubble up [mod]+K, which the
command palette uses. Pass the event out of monaco manually
*/
// Something in this configuration of monaco doesn't bubble up [mod]+K,
// which the command palette uses. Pass the event out of monaco manually
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK, function () {
global.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
});

2
packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryFieldLazy.tsx
View File

@ -4,8 +4,6 @@ import { Suspense } from 'react';
import MonacoQueryField from './MonacoQueryField';
import { Props } from './MonacoQueryFieldProps';
// const Field = React.lazy(() => import('./MonacoQueryField'));
export const MonacoQueryFieldLazy = (props: Props) => {
return (
<Suspense fallback={null}>

2
packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryFieldProps.ts
View File

@ -16,7 +16,5 @@ export type Props = {
placeholder: string;
onRunQuery: (value: string) => void;
onBlur: (value: string) => void;
// onChange will never initiate a query, it just denotes that a query value has been changed
onChange: (value: string) => void;
datasource: PrometheusDatasource;
};

10
packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
View File

@ -23,13 +23,5 @@ export const MonacoQueryFieldWrapper = (props: Props) => {
onChange(value);
};
/**
* Handles changes without running any queries
* @param value
*/
const handleChange = (value: string) => {
onChange(value);
};
return <MonacoQueryFieldLazy onChange={handleChange} onRunQuery={handleRunQuery} onBlur={handleBlur} {...rest} />;
return <MonacoQueryFieldLazy onRunQuery={handleRunQuery} onBlur={handleBlur} {...rest} />;
};