From 844d2c8621a4c74bc70bfcec7dd6e07e197a3c2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A1bor=20Farkas?= Date: Wed, 27 Oct 2021 11:45:32 +0200 Subject: [PATCH] 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 --- .../components/PromExploreQueryEditor.tsx | 3 +- .../prometheus/components/PromQueryField.tsx | 7 ++-- .../PromExploreQueryEditor.test.tsx.snap | 1 + .../monaco-query-field/MonacoQueryField.tsx | 11 +++---- .../MonacoQueryFieldProps.ts | 4 +-- .../MonacoQueryFieldWrapper.tsx | 33 +++++++++++++++++++ 6 files changed, 47 insertions(+), 12 deletions(-) create mode 100644 public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx index d54dcc192a4..e51f1ced0f9 100644 --- a/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx @@ -1,5 +1,5 @@ import React, { memo, FC, useEffect } from 'react'; -import { QueryEditorProps } from '@grafana/data'; +import { QueryEditorProps, CoreApp } from '@grafana/data'; import { PrometheusDatasource } from '../datasource'; import { PromQuery, PromOptions } from '../types'; import PromQueryField from './PromQueryField'; @@ -26,6 +26,7 @@ export const PromExploreQueryEditor: FC = (props: Props) => { return ( {isMonacoEditorEnabled ? ( - } + app="explore" data={ Object { "request": Object { 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 a9a6c493f63..5753baa649b 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 @@ -62,11 +62,12 @@ const getStyles = (theme: GrafanaTheme2) => { const MonacoQueryField = (props: Props) => { const containerRef = useRef(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()); }); }} /> diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts index a911c60d895..9c8f95e4c43 100644 --- a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts @@ -10,6 +10,6 @@ export type Props = { initialValue: string; languageProvider: PromQlLanguageProvider; history: Array>; - onChange: (query: string) => void; - onRunQuery: () => void; + onRunQuery: (value: string) => void; + onBlur: (value: string) => void; }; diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx new file mode 100644 index 00000000000..398a43ec63a --- /dev/null +++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx @@ -0,0 +1,33 @@ +import React, { useRef } from 'react'; +import { MonacoQueryFieldLazy } from './MonacoQueryFieldLazy'; +import { Props as MonacoProps } from './MonacoQueryFieldProps'; + +type Props = Omit & { + onChange: (query: string) => void; + onRunQuery: () => void; + runQueryOnBlur: boolean; +}; + +export const MonacoQueryFieldWrapper = (props: Props) => { + const lastRunValueRef = useRef(null); + const { runQueryOnBlur, onRunQuery, onChange, ...rest } = props; + + const handleRunQuery = (value: string) => { + lastRunValueRef.current = value; + onChange(value); + onRunQuery(); + }; + + const handleBlur = (value: string) => { + if (runQueryOnBlur) { + // run handleRunQuery only if the current value is different from the last-time-executed value + if (value !== lastRunValueRef.current) { + handleRunQuery(value); + } + } else { + onChange(value); + } + }; + + return ; +};