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: monaco-based query-editor-field, first step (#37251)

Browse Source 
* prometheus: add monaco-based query-field

for now it is behind a feature-flag

* added new trigger character

* better separate grafana-specifc and prom-specific code

* better styling

* more styling

* more styling

* simpler monaco-import

* better imports

* simplified code

* simplified type imports

* refactor: group completion-provider files together

* renamed type

* simplify type-import

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>

* handle no-metric-name autocompletes

* updated comment

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>
This commit is contained in:
Gábor Farkas
2021-08-31 13:46:13 +02:00
committed by GitHub
parent 8d3b31ff23
commit a5d11a3bef
16 changed files with 1003 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
import React, { ReactNode } from 'react';
import { config } from '@grafana/runtime';
import { Plugin } from 'slate';
import {
SlatePrism,
@@ -28,6 +29,7 @@ import {
} from '@grafana/data';
import { PrometheusDatasource } from '../datasource';
import { PrometheusMetricsBrowser } from './PrometheusMetricsBrowser';
import { MonacoQueryFieldLazy } from './monaco-query-field/MonacoQueryFieldLazy';
export const RECORDING_RULES_GROUP = '__recording_rules__';
@@ -279,6 +281,8 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
const chooserText = getChooserText(datasource.lookupsDisabled, syntaxLoaded, hasMetrics);
const buttonDisabled = !(syntaxLoaded && hasMetrics);
const isMonacoEditorEnabled = config.featureToggles.prometheusMonaco;
return (
<>
<div
@@ -295,19 +299,29 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
</button>
<div className="gf-form gf-form--grow flex-shrink-1 min-width-15">
<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}
/>
{isMonacoEditorEnabled ? (
<MonacoQueryFieldLazy
languageProvider={languageProvider}
history={this.props.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}
/>
)}
</div>
</div>
{labelBrowserVisible && (