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: enable new monaco-based query field (#41357)

Browse Source 
* prometheus: enable new monaco-based query field

* updated test

* updated tests

* fix e2e tests

* updated comment
This commit is contained in:
Gábor Farkas
2021-11-08 14:20:48 +01:00
committed by GitHub
parent e31bd2df2f
commit 9d82111a1a
10 changed files with 57 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
View File

@@ -1,12 +1,10 @@
import React, { ReactNode } from 'react';
import { config } from '@grafana/runtime';
import { Plugin } from 'slate';
import {
SlatePrism,
TypeaheadInput,
TypeaheadOutput,
QueryField,
BracesPlugin,
DOMUtil,
SuggestionsState,
@@ -73,7 +71,6 @@ export function willApplySuggestion(suggestion: string, { typeaheadContext, type
interface PromQueryFieldProps extends QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions> {
ExtraFieldElement?: ReactNode;
placeholder?: string;
'data-testid'?: string;
}
@@ -266,18 +263,14 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
datasource: { languageProvider },
query,
ExtraFieldElement,
placeholder = 'Enter a PromQL query (run with Shift+Enter)',
history = [],
} = this.props;
const { labelBrowserVisible, syntaxLoaded, hint } = this.state;
const cleanText = languageProvider ? languageProvider.cleanText : undefined;
const hasMetrics = languageProvider.metrics.length > 0;
const chooserText = getChooserText(datasource.lookupsDisabled, syntaxLoaded, hasMetrics);
const buttonDisabled = !(syntaxLoaded && hasMetrics);
const isMonacoEditorEnabled = config.featureToggles.prometheusMonaco;
return (
<LocalStorageValueProvider<string[]> storageKey={LAST_USED_LABELS_KEY} defaultValue={[]}>
{(lastUsedLabels, onLastUsedLabelsSave, onLastUsedLabelsDelete) => {
@@ -297,30 +290,14 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
</button>
<div className="gf-form gf-form--grow flex-shrink-1 min-width-15">
{isMonacoEditorEnabled ? (
<MonacoQueryFieldWrapper
runQueryOnBlur={this.props.app !== CoreApp.Explore}
languageProvider={languageProvider}
history={history}
onChange={this.onChangeQuery}
onRunQuery={this.props.onRunQuery}
initialValue={query.expr ?? ''}
/>
) : (
<QueryField
additionalPlugins={this.plugins}
cleanText={cleanText}
query={query.expr}
onTypeahead={this.onTypeahead}
onWillApplySuggestion={willApplySuggestion}
onBlur={this.props.onBlur}
onChange={this.onChangeQuery}
onRunQuery={this.props.onRunQuery}
placeholder={placeholder}
portalOrigin="prometheus"
syntaxLoaded={syntaxLoaded}
/>
)}
<MonacoQueryFieldWrapper
runQueryOnBlur={this.props.app !== CoreApp.Explore}
languageProvider={languageProvider}
history={history}
onChange={this.onChangeQuery}
onRunQuery={this.props.onRunQuery}
initialValue={query.expr ?? ''}
/>
</div>
</div>
{labelBrowserVisible && (