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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 47 additions and 12 deletions

View File

@ -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: Props) => {
return (
<PromQueryField
app={CoreApp.Explore}
datasource={datasource}
query={query}
range={range}

View File

@ -19,10 +19,10 @@ import { LanguageMap, languages as prismLanguages } from 'prismjs';
import { PromQuery, PromOptions } from '../types';
import { roundMsToMin } from '../language_utils';
import { CancelablePromise, makePromiseCancelable } from 'app/core/utils/CancelablePromise';
import { QueryEditorProps, QueryHint, isDataFrame, toLegacyResponseData, TimeRange } from '@grafana/data';
import { QueryEditorProps, QueryHint, isDataFrame, toLegacyResponseData, TimeRange, CoreApp } from '@grafana/data';
import { PrometheusDatasource } from '../datasource';
import { PrometheusMetricsBrowser } from './PrometheusMetricsBrowser';
import { MonacoQueryFieldLazy } from './monaco-query-field/MonacoQueryFieldLazy';
import { MonacoQueryFieldWrapper } from './monaco-query-field/MonacoQueryFieldWrapper';
import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
export const RECORDING_RULES_GROUP = '__recording_rules__';
@ -298,7 +298,8 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
<div className="gf-form gf-form--grow flex-shrink-1 min-width-15">
{isMonacoEditorEnabled ? (
<MonacoQueryFieldLazy
<MonacoQueryFieldWrapper
runQueryOnBlur={this.props.app !== CoreApp.Explore}
languageProvider={languageProvider}
history={history}
onChange={this.onChangeQuery}

View File

@ -24,6 +24,7 @@ exports[`PromExploreQueryEditor should render component 1`] = `
}
/>
}
app="explore"
data={
Object {
"request": Object {

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());
});
}}
/>

View File

@ -10,6 +10,6 @@ export type Props = {
initialValue: string;
languageProvider: PromQlLanguageProvider;
history: Array<HistoryItem<PromQuery>>;
onChange: (query: string) => void;
onRunQuery: () => void;
onRunQuery: (value: string) => void;
onBlur: (value: string) => void;
};

View File

@ -0,0 +1,33 @@
import React, { useRef } from 'react';
import { MonacoQueryFieldLazy } from './MonacoQueryFieldLazy';
import { Props as MonacoProps } from './MonacoQueryFieldProps';
type Props = Omit<MonacoProps, 'onRunQuery' | 'onBlur'> & {
onChange: (query: string) => void;
onRunQuery: () => void;
runQueryOnBlur: boolean;
};
export const MonacoQueryFieldWrapper = (props: Props) => {
const lastRunValueRef = useRef<string | null>(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 <MonacoQueryFieldLazy onRunQuery={handleRunQuery} onBlur={handleBlur} {...rest} />;
};