mirror of https://github.com/grafana/grafana
Prometheus Datasource: Improve Prom query variable editor (#58292)
* add prom query var editor with tests and migrations * fix migration, now query not expr * fix label_values migration * remove comments * fix label_values() variables order * update UI and use more clear language * fix tests * use null coalescing operators * allow users to query label values with label and metric if they have not set there flavor and version * use enums instead of numbers for readability * fix label&metrics switch * update type in qv editor * reuse datasource function to get all label names, getLabelNames(), prev named getTagKeys() * use getLabelNames in the query var editor * make label_values() variables label and metric more readable in the migration * fix tooltip for label_values to remove API reference * clean up tooltips and allow newlines in query_result function * change function wording and exprType to query type/qryType for readability * update prometheus query variable docs * Update public/app/plugins/datasource/prometheus/components/VariableQueryEditor.tsx Co-authored-by: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com> --------- Co-authored-by: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>pull/63236/head
Brendan O'Handley
2 years ago
committed by
GitHub
parent
1f984409a2
commit
eedcd7d5b1
@ -0,0 +1,142 @@ |
||||
import { render, screen, waitFor } from '@testing-library/react'; |
||||
import userEvent from '@testing-library/user-event'; |
||||
import React from 'react'; |
||||
import { selectOptionInTest } from 'test/helpers/selectOptionInTest'; |
||||
|
||||
import { PrometheusDatasource } from '../datasource'; |
||||
|
||||
import { PromVariableQueryEditor, Props } from './VariableQueryEditor'; |
||||
|
||||
const refId = 'PrometheusVariableQueryEditor-VariableQuery'; |
||||
|
||||
describe('PromVariableQueryEditor', () => { |
||||
let props: Props; |
||||
|
||||
beforeEach(() => { |
||||
props = { |
||||
datasource: { |
||||
hasLabelsMatchAPISupport: () => 1, |
||||
languageProvider: { |
||||
start: () => Promise.resolve([]), |
||||
syntax: () => {}, |
||||
getLabelKeys: () => [], |
||||
metrics: [], |
||||
}, |
||||
getInitHints: () => [], |
||||
} as unknown as PrometheusDatasource, |
||||
query: { |
||||
refId: 'test', |
||||
query: 'label_names()', |
||||
}, |
||||
onRunQuery: () => {}, |
||||
onChange: () => {}, |
||||
history: [], |
||||
}; |
||||
}); |
||||
|
||||
test('Displays a group of function options', async () => { |
||||
render(<PromVariableQueryEditor {...props} />); |
||||
|
||||
const select = screen.getByLabelText('Query type').parentElement!; |
||||
await userEvent.click(select); |
||||
|
||||
await waitFor(() => expect(screen.getAllByText('Label names')).toHaveLength(2)); |
||||
await waitFor(() => expect(screen.getByText('Label values')).toBeInTheDocument()); |
||||
await waitFor(() => expect(screen.getByText('Metrics')).toBeInTheDocument()); |
||||
await waitFor(() => expect(screen.getByText('Query result')).toBeInTheDocument()); |
||||
await waitFor(() => expect(screen.getByText('Series query')).toBeInTheDocument()); |
||||
}); |
||||
|
||||
test('Calls onChange for label_names() query', async () => { |
||||
const onChange = jest.fn(); |
||||
|
||||
props.query = { |
||||
refId: 'test', |
||||
query: '', |
||||
}; |
||||
|
||||
render(<PromVariableQueryEditor {...props} onChange={onChange} />); |
||||
|
||||
await selectOptionInTest(screen.getByLabelText('Query type'), 'Label names'); |
||||
|
||||
expect(onChange).toHaveBeenCalledWith({ |
||||
query: 'label_names()', |
||||
refId, |
||||
}); |
||||
}); |
||||
|
||||
test('Does not call onChange for other queries', async () => { |
||||
const onChange = jest.fn(); |
||||
|
||||
render(<PromVariableQueryEditor {...props} onChange={onChange} />); |
||||
|
||||
await selectOptionInTest(screen.getByLabelText('Query type'), 'Metrics'); |
||||
await selectOptionInTest(screen.getByLabelText('Query type'), 'Query result'); |
||||
await selectOptionInTest(screen.getByLabelText('Query type'), 'Series query'); |
||||
|
||||
expect(onChange).not.toHaveBeenCalled(); |
||||
}); |
||||
|
||||
test('Calls onChange for metrics() with argument onBlur', async () => { |
||||
const onChange = jest.fn(); |
||||
|
||||
props.query = { |
||||
refId: 'test', |
||||
query: 'metrics(a)', |
||||
}; |
||||
|
||||
render(<PromVariableQueryEditor {...props} onChange={onChange} />); |
||||
|
||||
const labelSelect = screen.getByLabelText('Metric selector'); |
||||
await userEvent.click(labelSelect); |
||||
const functionSelect = screen.getByLabelText('Query type').parentElement!; |
||||
await userEvent.click(functionSelect); |
||||
|
||||
expect(onChange).toHaveBeenCalledWith({ |
||||
query: 'metrics(a)', |
||||
refId, |
||||
}); |
||||
}); |
||||
|
||||
test('Calls onChange for query_result() with argument onBlur', async () => { |
||||
const onChange = jest.fn(); |
||||
|
||||
props.query = { |
||||
refId: 'test', |
||||
query: 'query_result(a)', |
||||
}; |
||||
|
||||
render(<PromVariableQueryEditor {...props} onChange={onChange} />); |
||||
|
||||
const labelSelect = screen.getByLabelText('Prometheus Query'); |
||||
await userEvent.click(labelSelect); |
||||
const functionSelect = screen.getByLabelText('Query type').parentElement!; |
||||
await userEvent.click(functionSelect); |
||||
|
||||
expect(onChange).toHaveBeenCalledWith({ |
||||
query: 'query_result(a)', |
||||
refId, |
||||
}); |
||||
}); |
||||
|
||||
test('Calls onChange for Match[] series with argument onBlur', async () => { |
||||
const onChange = jest.fn(); |
||||
|
||||
props.query = { |
||||
refId: 'test', |
||||
query: '{a: "example"}', |
||||
}; |
||||
|
||||
render(<PromVariableQueryEditor {...props} onChange={onChange} />); |
||||
|
||||
const labelSelect = screen.getByLabelText('Series Query'); |
||||
await userEvent.click(labelSelect); |
||||
const functionSelect = screen.getByLabelText('Query type').parentElement!; |
||||
await userEvent.click(functionSelect); |
||||
|
||||
expect(onChange).toHaveBeenCalledWith({ |
||||
query: '{a: "example"}', |
||||
refId, |
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,257 @@ |
||||
import React, { FC, FormEvent, useEffect, useState } from 'react'; |
||||
|
||||
import { QueryEditorProps, SelectableValue } from '@grafana/data'; |
||||
import { InlineField, InlineFieldRow, Input, Select, TextArea } from '@grafana/ui'; |
||||
|
||||
import { PrometheusDatasource } from '../datasource'; |
||||
import { |
||||
migrateVariableEditorBackToVariableSupport, |
||||
migrateVariableQueryToEditor, |
||||
} from '../migrations/variableMigration'; |
||||
import { PromOptions, PromQuery, PromVariableQuery, PromVariableQueryType as QueryType } from '../types'; |
||||
|
||||
export const variableOptions = [ |
||||
{ label: 'Label names', value: QueryType.LabelNames }, |
||||
{ label: 'Label values', value: QueryType.LabelValues }, |
||||
{ label: 'Metrics', value: QueryType.MetricNames }, |
||||
{ label: 'Query result', value: QueryType.VarQueryResult }, |
||||
{ label: 'Series query', value: QueryType.SeriesQuery }, |
||||
]; |
||||
|
||||
export type Props = QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions, PromVariableQuery>; |
||||
|
||||
const refId = 'PrometheusVariableQueryEditor-VariableQuery'; |
||||
|
||||
export const PromVariableQueryEditor: FC<Props> = ({ onChange, query, datasource }) => { |
||||
// to select the query type, i.e. label_names, label_values, etc.
|
||||
const [qryType, setQryType] = useState<number | undefined>(undefined); |
||||
|
||||
// list of variables for each function
|
||||
const [label, setLabel] = useState(''); |
||||
// metric is used for both label_values() and metric()
|
||||
// label_values() metric requires a whole/complete metric
|
||||
// metric() is expected to be a part of a metric string
|
||||
const [metric, setMetric] = useState(''); |
||||
// varQuery is a whole query, can include math/rates/etc
|
||||
const [varQuery, setVarQuery] = useState(''); |
||||
// seriesQuery is only a whole
|
||||
const [seriesQuery, setSeriesQuery] = useState(''); |
||||
|
||||
// list of label names for label_values(), /api/v1/labels, contains the same results as label_names() function
|
||||
const [labelOptions, setLabelOptions] = useState<Array<SelectableValue<string>>>([]); |
||||
|
||||
useEffect(() => { |
||||
if (!query) { |
||||
return; |
||||
} |
||||
// Changing from standard to custom variable editor changes the string attr from expr to query
|
||||
const variableQuery = query.query ? migrateVariableQueryToEditor(query.query) : query; |
||||
|
||||
setQryType(variableQuery.qryType); |
||||
setLabel(variableQuery.label ?? ''); |
||||
setMetric(variableQuery.metric ?? ''); |
||||
setVarQuery(variableQuery.varQuery ?? ''); |
||||
setSeriesQuery(variableQuery.seriesQuery ?? ''); |
||||
|
||||
// set the migrated label in the label options
|
||||
if (variableQuery.label) { |
||||
setLabelOptions([{ label: variableQuery.label, value: variableQuery.label }]); |
||||
} |
||||
}, [query]); |
||||
|
||||
// set the label names options for the label values var query
|
||||
useEffect(() => { |
||||
if (qryType !== QueryType.LabelValues) { |
||||
return; |
||||
} |
||||
|
||||
datasource.getLabelNames().then((labelNames: Array<{ text: string }>) => { |
||||
setLabelOptions(labelNames.map(({ text }) => ({ label: text, value: text }))); |
||||
}); |
||||
}, [datasource, qryType]); |
||||
|
||||
const onChangeWithVariableString = (qryType: QueryType) => { |
||||
const queryVar = { |
||||
qryType: qryType, |
||||
label, |
||||
metric, |
||||
varQuery, |
||||
seriesQuery, |
||||
refId: 'PrometheusVariableQueryEditor-VariableQuery', |
||||
}; |
||||
|
||||
const queryString = migrateVariableEditorBackToVariableSupport(queryVar); |
||||
|
||||
onChange({ |
||||
query: queryString, |
||||
refId, |
||||
}); |
||||
}; |
||||
|
||||
const onQueryTypeChange = (newType: SelectableValue<QueryType>) => { |
||||
setQryType(newType.value); |
||||
if (newType.value === QueryType.LabelNames) { |
||||
onChangeWithVariableString(newType.value); |
||||
} |
||||
}; |
||||
|
||||
const onLabelChange = (newLabel: SelectableValue<string>) => { |
||||
setLabel(newLabel.value ?? ''); |
||||
}; |
||||
|
||||
const onMetricChange = (e: FormEvent<HTMLInputElement>) => { |
||||
setMetric(e.currentTarget.value); |
||||
}; |
||||
|
||||
const onVarQueryChange = (e: FormEvent<HTMLTextAreaElement>) => { |
||||
setVarQuery(e.currentTarget.value); |
||||
}; |
||||
|
||||
const onSeriesQueryChange = (e: FormEvent<HTMLInputElement>) => { |
||||
setSeriesQuery(e.currentTarget.value); |
||||
}; |
||||
|
||||
const handleBlur = () => { |
||||
if (qryType === QueryType.LabelNames) { |
||||
onChangeWithVariableString(qryType); |
||||
} else if (qryType === QueryType.LabelValues && label) { |
||||
onChangeWithVariableString(qryType); |
||||
} else if (qryType === QueryType.MetricNames && metric) { |
||||
onChangeWithVariableString(qryType); |
||||
} else if (qryType === QueryType.VarQueryResult && varQuery) { |
||||
onChangeWithVariableString(qryType); |
||||
} else if (qryType === QueryType.SeriesQuery && seriesQuery) { |
||||
onChangeWithVariableString(qryType); |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<InlineFieldRow> |
||||
<InlineField |
||||
label="Query Type" |
||||
labelWidth={20} |
||||
tooltip={ |
||||
<div>The Prometheus data source plugin provides the following query types for template variables.</div> |
||||
} |
||||
> |
||||
<Select |
||||
placeholder="Select query type" |
||||
aria-label="Query type" |
||||
onChange={onQueryTypeChange} |
||||
onBlur={handleBlur} |
||||
value={qryType} |
||||
options={variableOptions} |
||||
width={25} |
||||
/> |
||||
</InlineField> |
||||
{qryType === QueryType.LabelValues && ( |
||||
<> |
||||
<InlineField |
||||
label="Label" |
||||
labelWidth={20} |
||||
required |
||||
tooltip={ |
||||
<div> |
||||
Returns a list of label values for the label name in all metrics unless the metric is specified. |
||||
</div> |
||||
} |
||||
> |
||||
<Select |
||||
aria-label="label-select" |
||||
onChange={onLabelChange} |
||||
onBlur={handleBlur} |
||||
value={label} |
||||
options={labelOptions} |
||||
width={25} |
||||
allowCustomValue |
||||
/> |
||||
</InlineField> |
||||
<InlineField |
||||
label="Metric" |
||||
labelWidth={20} |
||||
tooltip={<div>Optional: returns a list of label values for the label name in the specified metric.</div>} |
||||
> |
||||
<Input |
||||
type="text" |
||||
aria-label="Metric selector" |
||||
placeholder="Optional metric selector" |
||||
value={metric} |
||||
onChange={onMetricChange} |
||||
onBlur={handleBlur} |
||||
width={25} |
||||
/> |
||||
</InlineField> |
||||
</> |
||||
)} |
||||
{qryType === QueryType.MetricNames && ( |
||||
<> |
||||
<InlineField |
||||
label="Metric Regex" |
||||
labelWidth={20} |
||||
tooltip={<div>Returns a list of metrics matching the specified metric regex.</div>} |
||||
> |
||||
<Input |
||||
type="text" |
||||
aria-label="Metric selector" |
||||
placeholder="Metric Regex" |
||||
value={metric} |
||||
onChange={onMetricChange} |
||||
onBlur={handleBlur} |
||||
width={25} |
||||
/> |
||||
</InlineField> |
||||
</> |
||||
)} |
||||
{qryType === QueryType.VarQueryResult && ( |
||||
<> |
||||
<InlineField |
||||
label="Query" |
||||
labelWidth={20} |
||||
tooltip={ |
||||
<div> |
||||
Returns a list of Prometheus query results for the query. This can include Prometheus functions, i.e. |
||||
sum(go_goroutines). |
||||
</div> |
||||
} |
||||
> |
||||
<TextArea |
||||
type="text" |
||||
aria-label="Prometheus Query" |
||||
placeholder="Prometheus Query" |
||||
value={varQuery} |
||||
onChange={onVarQueryChange} |
||||
onBlur={handleBlur} |
||||
cols={100} |
||||
/> |
||||
</InlineField> |
||||
</> |
||||
)} |
||||
{qryType === QueryType.SeriesQuery && ( |
||||
<> |
||||
<InlineField |
||||
label="Series Query" |
||||
labelWidth={20} |
||||
tooltip={ |
||||
<div> |
||||
Enter enter a metric with labels, only a metric or only labels, i.e. |
||||
go_goroutines{instance="localhost:9090"}, go_goroutines, or |
||||
{instance="localhost:9090"}. Returns a list of time series associated with the |
||||
entered data. |
||||
</div> |
||||
} |
||||
> |
||||
<Input |
||||
type="text" |
||||
aria-label="Series Query" |
||||
placeholder="Series Query" |
||||
value={seriesQuery} |
||||
onChange={onSeriesQueryChange} |
||||
onBlur={handleBlur} |
||||
width={100} |
||||
/> |
||||
</InlineField> |
||||
</> |
||||
)} |
||||
</InlineFieldRow> |
||||
); |
||||
}; |
||||
@ -0,0 +1,104 @@ |
||||
import { PromVariableQuery, PromVariableQueryType as QueryType } from '../types'; |
||||
|
||||
const labelNamesRegex = /^label_names\(\)\s*$/; |
||||
const labelValuesRegex = /^label_values\((?:(.+),\s*)?([a-zA-Z_][a-zA-Z0-9_]*)\)\s*$/; |
||||
const metricNamesRegex = /^metrics\((.+)\)\s*$/; |
||||
const queryResultRegex = /^query_result\((.+)\)\s*$/; |
||||
|
||||
export function migrateVariableQueryToEditor(rawQuery: string | PromVariableQuery): PromVariableQuery { |
||||
// If not string, we assume PromVariableQuery
|
||||
if (typeof rawQuery !== 'string') { |
||||
return rawQuery; |
||||
} |
||||
|
||||
const queryBase = { |
||||
refId: 'PrometheusDatasource-VariableQuery', |
||||
qryType: QueryType.LabelNames, |
||||
}; |
||||
|
||||
const labelNames = rawQuery.match(labelNamesRegex); |
||||
if (labelNames) { |
||||
return { |
||||
...queryBase, |
||||
qryType: QueryType.LabelNames, |
||||
}; |
||||
} |
||||
|
||||
const labelValues = rawQuery.match(labelValuesRegex); |
||||
|
||||
if (labelValues) { |
||||
const label = labelValues[2]; |
||||
const metric = labelValues[1]; |
||||
if (metric) { |
||||
return { |
||||
...queryBase, |
||||
qryType: QueryType.LabelValues, |
||||
label, |
||||
metric, |
||||
}; |
||||
} else { |
||||
return { |
||||
...queryBase, |
||||
qryType: QueryType.LabelValues, |
||||
label, |
||||
}; |
||||
} |
||||
} |
||||
|
||||
const metricNames = rawQuery.match(metricNamesRegex); |
||||
if (metricNames) { |
||||
return { |
||||
...queryBase, |
||||
qryType: QueryType.MetricNames, |
||||
metric: metricNames[1], |
||||
}; |
||||
} |
||||
|
||||
const queryResult = rawQuery.match(queryResultRegex); |
||||
if (queryResult) { |
||||
return { |
||||
...queryBase, |
||||
qryType: QueryType.VarQueryResult, |
||||
varQuery: queryResult[1], |
||||
}; |
||||
} |
||||
|
||||
// seriesQuery does not have a function and no regex above
|
||||
if (!labelNames && !labelValues && !metricNames && !queryResult) { |
||||
return { |
||||
...queryBase, |
||||
qryType: QueryType.SeriesQuery, |
||||
seriesQuery: rawQuery, |
||||
}; |
||||
} |
||||
|
||||
return queryBase; |
||||
} |
||||
|
||||
// migrate it back to a string with the correct varialbes in place
|
||||
export function migrateVariableEditorBackToVariableSupport(QueryVariable: PromVariableQuery): string { |
||||
switch (QueryVariable.qryType) { |
||||
case QueryType.LabelNames: |
||||
return 'label_names()'; |
||||
case QueryType.LabelValues: |
||||
if (QueryVariable.metric) { |
||||
return `label_values(${QueryVariable.metric},${QueryVariable.label})`; |
||||
} else { |
||||
return `label_values(${QueryVariable.label})`; |
||||
} |
||||
case QueryType.MetricNames: |
||||
return `metrics(${QueryVariable.metric})`; |
||||
case QueryType.VarQueryResult: |
||||
const varQuery = removeLineBreaks(QueryVariable.varQuery); |
||||
return `query_result(${varQuery})`; |
||||
case QueryType.SeriesQuery: |
||||
return '' + QueryVariable.seriesQuery; |
||||
} |
||||
|
||||
return ''; |
||||
} |
||||
|
||||
// allow line breaks in query result textarea
|
||||
function removeLineBreaks(input?: string) { |
||||
return input ? input.replace(/[\r\n]+/gm, '') : ''; |
||||
} |
||||
Loading…
Reference in new issue