prometheus: monaco: handle in-dashboard and in-explore use cases (#40922)

* prometheus: monaco: handle in-dashboard and in-explore use cases

* refactor is-explore handling

* improved comment

* removed unnecessary comment

* reordered props

* simplify code

* refactor: better prop-name

* fixed test snapshot
This commit is contained in:
Gábor Farkas
2021-10-27 11:45:32 +02:00
committed by GitHub
parent a127e106db
commit 844d2c8621
6 changed files with 47 additions and 12 deletions

View File

@@ -62,11 +62,12 @@ const getStyles = (theme: GrafanaTheme2) => {
const MonacoQueryField = (props: Props) => {
const containerRef = useRef<HTMLDivElement>(null);
const { languageProvider, history, onChange, initialValue } = props;
const { languageProvider, history, onBlur, onRunQuery, initialValue } = props;
const lpRef = useLatest(languageProvider);
const historyRef = useLatest(history);
const onChangeRef = useLatest(onChange);
const onRunQueryRef = useLatest(onRunQuery);
const onBlurRef = useLatest(onBlur);
const autocompleteDisposeFun = useRef<(() => void) | null>(null);
@@ -96,7 +97,7 @@ const MonacoQueryField = (props: Props) => {
onMount={(editor, monaco) => {
// we setup on-blur
editor.onDidBlurEditorWidget(() => {
onChangeRef.current(editor.getValue());
onBlurRef.current(editor.getValue());
});
// we construct a DataProvider object
@@ -169,9 +170,7 @@ const MonacoQueryField = (props: Props) => {
// handle: shift + enter
// FIXME: maybe move this functionality into CodeEditor?
editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, () => {
const text = editor.getValue();
props.onChange(text);
props.onRunQuery();
onRunQueryRef.current(editor.getValue());
});
}}
/>