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: Update onblur ref with value of last changed monaco editor (#55513)

Browse Source 
* add new monaco callback to update onBlurRef with current value on monaco editor change.

* don't overload onBlur, create new onChange tracker that doesn't initiate queries, just updates values

* Update public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>
This commit is contained in:
Galen Kistler 2022-09-21 12:51:14 -05:00 committed by GitHub
parent e55003174a
commit 89a20526e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -90,12 +90,13 @@ 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 } = props;
const { languageProvider, history, onBlur, onRunQuery, initialValue, placeholder, onChange } = 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);
@ -201,6 +202,15 @@ 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.
editor.getModel()?.onDidChangeContent(() => {
onChangeRef.current(editor.getValue());
});
// handle: shift + enter
// FIXME: maybe move this functionality into CodeEditor?
editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, () => {

2
public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts
View File

@ -14,4 +14,6 @@ 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;
};

10
public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
View File

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