From 72367cf1ad5224cb18f24455504c7c1f9317192c Mon Sep 17 00:00:00 2001 From: Andrej Ocenas Date: Tue, 31 May 2022 11:50:23 +0200 Subject: [PATCH] Prometheus: Cleanup annotation editor (#49615) * Remove unused code * Remove test * Remove Builder mode and simplify the code * Fix step mapping * Fix import * change placeholder --- .../components/LokiQueryEditorSelector.tsx | 10 +- .../components/AnnotationQueryEditor.tsx | 77 ++++++++------- .../datasource/prometheus/datasource.tsx | 2 +- .../datasource/prometheus/module.test.ts | 6 -- .../plugins/datasource/prometheus/module.ts | 8 +- .../partials/annotations.editor.html | 39 -------- .../components/PromQueryBuilderOptions.tsx | 96 ++++++++----------- .../components/PromQueryEditorSelector.tsx | 60 +++--------- .../shared/QueryEditorModeToggle.tsx | 10 +- 9 files changed, 101 insertions(+), 207 deletions(-) delete mode 100644 public/app/plugins/datasource/prometheus/partials/annotations.editor.html diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx index 3d264ea554d..ef7aceaf560 100644 --- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx +++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx @@ -99,15 +99,7 @@ export const LokiQueryEditorSelector = React.memo((props) > Run query - + diff --git a/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx index cd7bfc987d4..bbc84a4bdaf 100644 --- a/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx +++ b/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx @@ -1,11 +1,10 @@ import React from 'react'; import { AnnotationQuery } from '@grafana/data'; -import { EditorRow, EditorField, EditorSwitch, Space } from '@grafana/experimental'; -import { Input } from '@grafana/ui'; +import { EditorRow, EditorField, EditorSwitch, Space, EditorRows } from '@grafana/experimental'; +import { Input, AutoSizeInput } from '@grafana/ui'; -import { PromQueryEditorSelector } from '../querybuilder/components/PromQueryEditorSelector'; -import { QueryEditorMode } from '../querybuilder/shared/types'; +import { PromQueryCodeEditor } from '../querybuilder/components/PromQueryCodeEditor'; import { PromQuery } from '../types'; import { PromQueryEditorProps } from './types'; @@ -19,35 +18,47 @@ export function AnnotationQueryEditor(props: Props) { // This is because of problematic typing. See AnnotationQueryEditorProps in grafana-data/annotations.ts. const annotation = props.annotation!; const onAnnotationChange = props.onAnnotationChange!; + const query = { expr: annotation.expr, refId: annotation.name, interval: annotation.step }; + return ( <> - - onAnnotationChange({ - ...annotation, - expr: query.expr, - step: query.interval, - }) - } - uiOptions={{ - modes: { - [QueryEditorMode.Explain]: false, - [QueryEditorMode.Code]: true, - [QueryEditorMode.Builder]: true, - }, - runQueryButton: false, - options: { - exemplars: false, - type: false, - format: false, - minStep: true, - legend: false, - resolution: false, - }, - }} - /> + + { + onAnnotationChange({ + ...annotation, + expr: query.expr, + }); + }} + /> + + + An additional lower limit for the step parameter of the Prometheus query and for the{' '} + $__interval and $__rate_interval variables. + + } + > + { + onAnnotationChange({ + ...annotation, + step: ev.currentTarget.value, + }); + }} + defaultValue={query.interval} + /> + + + { onAnnotationChange({ @@ -89,7 +100,7 @@ export function AnnotationQueryEditor(props: Props) { > { onAnnotationChange({ diff --git a/public/app/plugins/datasource/prometheus/datasource.tsx b/public/app/plugins/datasource/prometheus/datasource.tsx index 209112270d2..9c5426548d7 100644 --- a/public/app/plugins/datasource/prometheus/datasource.tsx +++ b/public/app/plugins/datasource/prometheus/datasource.tsx @@ -62,7 +62,7 @@ import { } from './types'; import { PrometheusVariableSupport } from './variables'; -export const ANNOTATION_QUERY_STEP_DEFAULT = '60s'; +const ANNOTATION_QUERY_STEP_DEFAULT = '60s'; const GET_AND_POST_METADATA_ENDPOINTS = ['api/v1/query', 'api/v1/query_range', 'api/v1/series', 'api/v1/labels']; export class PrometheusDatasource diff --git a/public/app/plugins/datasource/prometheus/module.test.ts b/public/app/plugins/datasource/prometheus/module.test.ts index af031a9ee84..171fd491637 100644 --- a/public/app/plugins/datasource/prometheus/module.test.ts +++ b/public/app/plugins/datasource/prometheus/module.test.ts @@ -1,13 +1,7 @@ -import { ANNOTATION_QUERY_STEP_DEFAULT } from './datasource'; import { plugin as PrometheusDatasourcePlugin } from './module'; describe('module', () => { it('should have metrics query field in panels and Explore', () => { expect(PrometheusDatasourcePlugin.components.QueryEditor).toBeDefined(); }); - it('should have stepDefaultValuePlaceholder set in annotations ctrl', () => { - expect(PrometheusDatasourcePlugin.components.AnnotationsQueryCtrl).toBeDefined(); - const annotationsCtrl = new PrometheusDatasourcePlugin.components.AnnotationsQueryCtrl(); - expect(annotationsCtrl.stepDefaultValuePlaceholder).toEqual(ANNOTATION_QUERY_STEP_DEFAULT); - }); }); diff --git a/public/app/plugins/datasource/prometheus/module.ts b/public/app/plugins/datasource/prometheus/module.ts index 06c047eeaf2..ba33b7f90cb 100644 --- a/public/app/plugins/datasource/prometheus/module.ts +++ b/public/app/plugins/datasource/prometheus/module.ts @@ -3,15 +3,9 @@ import { DataSourcePlugin } from '@grafana/data'; import PromCheatSheet from './components/PromCheatSheet'; import PromQueryEditorByApp from './components/PromQueryEditorByApp'; import { ConfigEditor } from './configuration/ConfigEditor'; -import { ANNOTATION_QUERY_STEP_DEFAULT, PrometheusDatasource } from './datasource'; - -class PrometheusAnnotationsQueryCtrl { - static templateUrl = 'partials/annotations.editor.html'; - stepDefaultValuePlaceholder = ANNOTATION_QUERY_STEP_DEFAULT; -} +import { PrometheusDatasource } from './datasource'; export const plugin = new DataSourcePlugin(PrometheusDatasource) .setQueryEditor(PromQueryEditorByApp) .setConfigEditor(ConfigEditor) - .setAnnotationQueryCtrl(PrometheusAnnotationsQueryCtrl) .setQueryEditorHelp(PromCheatSheet); diff --git a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html deleted file mode 100644 index c7c54e816e1..00000000000 --- a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html +++ /dev/null @@ -1,39 +0,0 @@ -
-
- Search expression - -
-
- Step - -
-
- -
-
Field formatsFor title and text fields, use either the name or a pattern. For example, {{instance}} is replaced with label value for the label instance.
-
-
- Title - -
-
- Tags - -
-
-
- Text - -
-
-
- -
Other options
-
-
- - -
-
-
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx index b24e15df1aa..9c6d357d77f 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx @@ -25,10 +25,9 @@ export interface Props { app?: CoreApp; onChange: (update: PromQuery) => void; onRunQuery: () => void; - uiOptions: UIOptions; } -export const PromQueryBuilderOptions = React.memo(({ query, app, onChange, onRunQuery, uiOptions }) => { +export const PromQueryBuilderOptions = React.memo(({ query, app, onChange, onRunQuery }) => { const onChangeFormat = (value: SelectableValue) => { onChange({ ...query, format: value.value }); onRunQuery(); @@ -59,53 +58,42 @@ export const PromQueryBuilderOptions = React.memo(({ query, app, onChange return ( - - {uiOptions.legend && ( - onChange({ ...query, legendFormat })} - onRunQuery={onRunQuery} + + onChange({ ...query, legendFormat })} + onRunQuery={onRunQuery} + /> + + An additional lower limit for the step parameter of the Prometheus query and for the{' '} + $__interval and $__rate_interval variables. + + } + > + - )} - {uiOptions.minStep && ( - - An additional lower limit for the step parameter of the Prometheus query and for the{' '} - $__interval and $__rate_interval variables. - - } - > - - - )} - {uiOptions.format && ( - - + + + + + {shouldShowExemplarSwitch(query, app) && ( )} - {uiOptions.resolution && query.intervalFactor && query.intervalFactor > 1 && ( + {query.intervalFactor && query.intervalFactor > 1 && (