+ {ExtraFieldElement}
+
+ );
+};
+
+export default QueryField;
diff --git a/src/components/QueryEditor/state.ts b/src/components/QueryEditor/state.ts
index e69de29..70f55db 100644
--- a/src/components/QueryEditor/state.ts
+++ b/src/components/QueryEditor/state.ts
@@ -0,0 +1,15 @@
+import { Query, QueryType } from "../../types";
+
+export function getQueryWithDefaults(query: Query): Query {
+ let result = query;
+
+ if (query.expr == null) {
+ result = { ...result, expr: '' };
+ }
+
+ if (query.queryType == null) {
+ result = { ...result, queryType: QueryType.Range };
+ }
+
+ return result;
+}
diff --git a/src/components/monaco-query-field/MonacoQueryField.tsx b/src/components/monaco-query-field/MonacoQueryField.tsx
index 951ff35..ef77d06 100755
--- a/src/components/monaco-query-field/MonacoQueryField.tsx
+++ b/src/components/monaco-query-field/MonacoQueryField.tsx
@@ -1,33 +1,12 @@
-// Copyright (c) 2022 Grafana Labs
-// Modifications Copyright (c) 2022 VictoriaMetrics
-// 2022-10-04: remove onChangeRef
-// A detailed history of changes can be seen here - https://github.com/VictoriaMetrics/grafana-datasource
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program. If not, see .
-
import { css } from '@emotion/css';
-import { promLanguageDefinition } from 'monaco-promql';
-import React, { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
import { useLatest } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
-import { useTheme2, ReactMonacoEditor, Monaco, monacoTypes } from '@grafana/ui';
+import { useTheme2, ReactMonacoEditor, monacoTypes } from '@grafana/ui';
import { Props } from './MonacoQueryFieldProps';
-import { getOverrideServices } from './getOverrideServices';
-import { getCompletionProvider, getSuggestOptions } from './monaco-completion-provider';
const options: monacoTypes.editor.IStandaloneEditorConstructionOptions = {
codeLens: false,
@@ -56,7 +35,6 @@ const options: monacoTypes.editor.IStandaloneEditorConstructionOptions = {
horizontalScrollbarSize: 0,
},
scrollBeyondLastLine: false,
- suggest: getSuggestOptions(),
suggestFontSize: 12,
wordWrap: 'on',
};
@@ -70,24 +48,6 @@ const options: monacoTypes.editor.IStandaloneEditorConstructionOptions = {
// up & down. this we want to avoid)
const EDITOR_HEIGHT_OFFSET = 2;
-const PROMQL_LANG_ID = promLanguageDefinition.id;
-
-// we must only run the promql-setup code once
-let PROMQL_SETUP_STARTED = false;
-
-function ensurePromQL(monaco: Monaco) {
- if (!PROMQL_SETUP_STARTED) {
- PROMQL_SETUP_STARTED = true;
- const { aliases, extensions, mimetypes, loader } = promLanguageDefinition;
- monaco.languages.register({ id: PROMQL_LANG_ID, aliases, extensions, mimetypes });
-
- loader().then((mod) => {
- monaco.languages.setMonarchTokensProvider(PROMQL_LANG_ID, mod.language);
- monaco.languages.setLanguageConfiguration(PROMQL_LANG_ID, mod.languageConfiguration);
- });
- }
-}
-
const getStyles = (theme: GrafanaTheme2, placeholder: string) => {
return {
container: css`
@@ -106,126 +66,34 @@ const getStyles = (theme: GrafanaTheme2, placeholder: string) => {
const MonacoQueryField = (props: Props) => {
// we need only one instance of `overrideServices` during the lifetime of the react component
- const overrideServicesRef = useRef(getOverrideServices());
const containerRef = useRef(null);
- const { languageProvider, history, onBlur, onRunQuery, initialValue, placeholder, readOnly } = props;
+ const { onBlur, onRunQuery, initialValue, placeholder, readOnly } = props;
- const lpRef = useLatest(languageProvider);
- const historyRef = useLatest(history);
const onRunQueryRef = useLatest(onRunQuery);
const onBlurRef = useLatest(onBlur);
- const autocompleteDisposeFun = useRef<(() => void) | null>(null);
-
const theme = useTheme2();
const styles = getStyles(theme, placeholder);
- useEffect(() => {
- // when we unmount, we unregister the autocomplete-function, if it was registered
- return () => {
- autocompleteDisposeFun.current?.();
- };
- }, []);
-
return (
{
- ensurePromQL(monaco);
- }}
onMount={(editor, monaco) => {
// we setup on-blur
editor.onDidBlurEditorWidget(() => {
onBlurRef.current(editor.getValue());
});
- // we construct a DataProvider object
- const getSeries = (selector: string) => lpRef.current.getSeries(selector);
-
- const getHistory = () =>
- Promise.resolve(historyRef.current.map((h) => h.query.expr).filter((expr) => expr !== undefined));
-
- const getAllMetricNames = () => {
- const { metrics, metricsMetadata } = lpRef.current;
- const result = metrics.map((m) => {
- const metaItem = metricsMetadata?.[m];
- return {
- name: m,
- help: metaItem?.help ?? '',
- type: metaItem?.type ?? '',
- };
- });
-
- return Promise.resolve(result);
- };
-
- const getAllWithTemplates = () => {
- const { withTemplates } = lpRef.current;
- const result = withTemplates.map(t => ({
- name: t.label,
- help: t.comment || "",
- value: t.value
- }))
-
- return Promise.resolve(result);
- };
-
- const getAllLabelNames = () => Promise.resolve(lpRef.current.getLabelKeys());
-
- const getLabelValues = (labelName: string) => lpRef.current.getLabelValues(labelName);
-
- const dataProvider = {
- getSeries,
- getHistory,
- getAllMetricNames,
- getAllWithTemplates,
- getAllLabelNames,
- getLabelValues
- };
- const completionProvider = getCompletionProvider(monaco, dataProvider);
-
- // completion-providers in monaco are not registered directly to editor-instances,
- // they are registered to languages. this makes it hard for us to have
- // separate completion-providers for every query-field-instance
- // (but we need that, because they might connect to different datasources).
- // the trick we do is, we wrap the callback in a "proxy",
- // and in the proxy, the first thing is, we check if we are called from
- // "our editor instance", and if not, we just return nothing. if yes,
- // we call the completion-provider.
- const filteringCompletionProvider: monacoTypes.languages.CompletionItemProvider = {
- ...completionProvider,
- provideCompletionItems: (model, position, context, token) => {
- // if the model-id does not match, then this call is from a different editor-instance,
- // not "our instance", so return nothing
- if (editor.getModel()?.id !== model.id) {
- return { suggestions: [] };
- }
- return completionProvider.provideCompletionItems(model, position, context, token);
- },
- };
-
- const { dispose } = monaco.languages.registerCompletionItemProvider(
- PROMQL_LANG_ID,
- filteringCompletionProvider
- );
-
- autocompleteDisposeFun.current = dispose;
- // this code makes the editor resize itself so that the content fits
- // (it will grow taller when necessary)
- // FIXME: maybe move this functionality into CodeEditor, like:
- //
const updateElementHeight = () => {
const containerDiv = containerRef.current;
if (containerDiv !== null) {
diff --git a/src/components/monaco-query-field/MonacoQueryFieldLazy.tsx b/src/components/monaco-query-field/MonacoQueryFieldLazy.tsx
index 853bd18..c69f3e9 100755
--- a/src/components/monaco-query-field/MonacoQueryFieldLazy.tsx
+++ b/src/components/monaco-query-field/MonacoQueryFieldLazy.tsx
@@ -1,21 +1,3 @@
-// Copyright (c) 2022 Grafana Labs
-// Modifications Copyright (c) 2022 VictoriaMetrics
-// 2022-10-04: remove lazy Field import
-// A detailed history of changes can be seen here - https://github.com/VictoriaMetrics/grafana-datasource
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program. If not, see .
-
import React, { Suspense } from 'react';
import Field from './MonacoQueryField'
diff --git a/src/components/monaco-query-field/MonacoQueryFieldProps.ts b/src/components/monaco-query-field/MonacoQueryFieldProps.ts
index 9c9225c..5ec6678 100755
--- a/src/components/monaco-query-field/MonacoQueryFieldProps.ts
+++ b/src/components/monaco-query-field/MonacoQueryFieldProps.ts
@@ -1,34 +1,10 @@
-// Copyright (c) 2022 Grafana Labs
-// Modifications Copyright (c) 2022 VictoriaMetrics
-// 2022-10-04: remove onChange method
-// A detailed history of changes can be seen here - https://github.com/VictoriaMetrics/grafana-datasource
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program. If not, see .
-
import { HistoryItem } from '@grafana/data';
-import type PromQlLanguageProvider from '../../language_provider';
-import { PromQuery } from '../../types';
+import { Query } from '../../types';
-// we need to store this in a separate file,
-// because we have an async-wrapper around,
-// the react-component, and it needs the same
-// props as the sync-component.
export type Props = {
initialValue: string;
- languageProvider: PromQlLanguageProvider;
- history: Array>;
+ history: Array>;
placeholder: string;
readOnly?: boolean;
onRunQuery: (value: string) => void;
diff --git a/src/components/monaco-query-field/MonacoQueryFieldWrapper.tsx b/src/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
index 3800b49..60295a3 100755
--- a/src/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
+++ b/src/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
@@ -1,21 +1,3 @@
-// Copyright (c) 2022 Grafana Labs
-// Modifications Copyright (c) 2022 VictoriaMetrics
-// 2022-10-04: remove handleChange function
-// A detailed history of changes can be seen here - https://github.com/VictoriaMetrics/grafana-datasource
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program. If not, see .
-
import React, { useRef } from 'react';
import { MonacoQueryFieldLazy } from './MonacoQueryFieldLazy';
diff --git a/src/configuration/AlertingSettings.tsx b/src/configuration/AlertingSettings.tsx
index d9c4c43..3223a86 100644
--- a/src/configuration/AlertingSettings.tsx
+++ b/src/configuration/AlertingSettings.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
import { InlineField, InlineSwitch } from '@grafana/ui';
export function AlertingSettings({
@@ -9,16 +8,7 @@ export function AlertingSettings({
onOptionsChange,
}: Pick) {
return (
-
- }
- >
+
{
/>
- {config.featureToggles.lokiPredefinedOperations && (
-
-
- {
- 'Predefined operations are used as an initial state for your queries. They are useful, if you want to unpack, parse or format all log lines. Currently we support only log operations starting with |. For example: | unpack | line_format "{{.message}}".'
- }
-
- }
- >
- ) =>
- onPredefinedOperationsChange(event.currentTarget.value)
- }
- width={40}
- placeholder="| unpack | line_format"
- spellCheck={false}
- />
-
-
-
-
-
- )}
-
+