mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
a127e106db
commit
844d2c8621
@ -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}
|
||||
|
@ -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}
|
||||
|
@ -24,6 +24,7 @@ exports[`PromExploreQueryEditor should render component 1`] = `
|
||||
}
|
||||
/>
|
||||
}
|
||||
app="explore"
|
||||
data={
|
||||
Object {
|
||||
"request": Object {
|
||||
|
@ -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());
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
@ -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;
|
||||
};
|
||||
|
@ -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} />;
|
||||
};
|
Loading…
Reference in New Issue
Block a user