Prometheus: Variable query editor improvements #69884

bohandley · 2023-06-11T23:06:47Z

What is this feature?
The Prom variable query editor allows a user to choose a label_values query type. This allows a user to choose a label name and an optional metric. These are the following updates to the label_values query type inputs.

Use the metric select in the Prom query variable editor.
Allow the metric to be filtered with optional label filters.
Allow the metric to be clearable.
When a metric is selected, filter the options of required label name select dropdown
Add variables to the options in the select drop downs (labels and metric for the label_values query type).
Styling changes and copy

Why do we need this feature?
The previous metric input for the label_values query type was a text input that was too small and the metric was not able to be filtered. There was also a recent PR to allow for the label_values label input to accept variables. These changes listed above add functionality to the query variable editor and allow the customer greater flexibility in creating a variable.

Who is this feature for?
Anyone using the prom query variable editor.

Please check that:

It works as expected from a user's perspective.
If this is a pre-GA feature, it is behind a feature toggle.
The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

…s dropdown

gtk-grafana · 2023-06-12T18:15:58Z

@bohandley looks like this might address #69859

itsmylife · 2023-06-14T09:39:01Z

I check out the branch and open my existing dashboard with a bunch of variables in it.

Manual testing results:

When I keep adding new label filters the row gets wider. I expect it to be wrapped.
After I select a Label I expect to see the results. I have to click another place to trigger to run the query

itsmylife · 2023-06-14T09:56:14Z

I think the definition column will be filled in another PR, right?

itsmylife

Some nitpicks but the rest is 🚀

itsmylife · 2023-06-14T10:26:38Z

public/app/plugins/datasource/prometheus/querybuilder/components/MetricsLabelsSection.tsx

+  variableEditor,
+}: MetricsLabelsSectionProps) {
+  // fixing the use of 'as' from refactoring
+  // @ts-ignore


~~I think the type is QueryBuilderLabelFilter[]. Do we need @ts-ignore here?~~

I see that it is about LabelFilter.tsx and specifically it is about onLabelsChange function. Could you please check if that's possible to have the proper types? Let's avoid ts-ignore as much as we can.

@itsmylife tsmylife This is what we had before

onChange={onChangeLabels as (labelFilters: Array<Partial<QueryBuilderLabelFilter>>) => void}

https://github.com/grafana/grafana/pull/69884/files#r1229794280

and

const onChangeLabels = (labels: QueryBuilderLabelFilter[]) => { onChange({ ...query, labels }); };

https://github.com/grafana/grafana/pull/69884/files#r1229795429

When I moved this into a new file, using onChangeLabels as was not permitted by prettier. I removed the as and using the type QueryBuilderLabelFilter[] this caused a type error.
https://github.com/grafana/grafana/pull/69884/files#r1229803709

I am not sure how to fix this as the function definition. The deinition, onChangeLabels as (labelFilters: Array<Partial<QueryBuilderLabelFilter>>) => void}, is same in the LabelFilters.tsx component but betterer won't allow using as. Do you have any suggestions?

I do not have any suggestions but I checked it briefly and realized that it is not a simple change to make. So we can leave it like this and address it later on.

Can we create an issue with the tech-debt label to address this?

I will create the issue once this PR is merged to track this.

itsmylife · 2023-06-14T10:32:29Z

public/app/plugins/datasource/prometheus/querybuilder/components/MetricsLabelsSection.tsx

+  const onGetLabelNames = async (forLabel: Partial<QueryBuilderLabelFilter>): Promise<SelectableValue[]> => {
+    // If no metric we need to use a different method
+    if (!query.metric) {
+      // Todo add caching but inside language provider!


@gtk-grafana I see it in this PR. Do we track this todo in somewhere?

We can remove the todo, the prometheusResourceBrowserCache will cache this

public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx

bohandley · 2023-06-14T15:16:29Z

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx

-          debounceDuration={datasource.getDebounceTimeInMilliseconds()}
-          getLabelValuesAutofillSuggestions={getLabelValuesAutocompleteSuggestions}
-          labelsFilters={query.labels}
-          // eslint-ignore


Link for discussion about not using ts-ignore

bohandley · 2023-06-14T15:17:25Z

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx

@@ -35,171 +32,6 @@ export interface Props {
 export const PromQueryBuilder = React.memo<Props>((props) => {
  const { datasource, query, onChange, onRunQuery, data, showExplain } = props;
  const [highlightedOp, setHighlightedOp] = useState<QueryBuilderOperation | undefined>();
-  const onChangeLabels = (labels: QueryBuilderLabelFilter[]) => {


Link for discussion about not using ts-ignore

bohandley · 2023-06-14T15:22:31Z

public/app/plugins/datasource/prometheus/querybuilder/components/MetricsLabelsSection.tsx

+        debounceDuration={datasource.getDebounceTimeInMilliseconds()}
+        getLabelValuesAutofillSuggestions={getLabelValuesAutocompleteSuggestions}
+        labelsFilters={query.labels}
+        onChange={onChangeLabels}


Link for discussion about not using ts-ignore

bohandley · 2023-06-14T20:07:04Z

@itsmylife

I check out the branch and open my existing dashboard with a bunch of variables in it.

Manual testing results:

When I keep adding new label filters the row gets wider. I expect it to be wrapped.

*EDIT labels are now wrapped

After I select a Label I expect to see the results. I have to click another place to trigger to run the query

*EDIT see latest commit for improved behavior for selects and inputs. Running onChange now for selecting a label

bohandley · 2023-06-15T03:09:01Z

@itsmylife wrap is working, looks better now 🎁

Labelfiltersflex.mov

…vior

itsmylife · 2023-06-16T09:43:24Z

The wrapping looks good.

I experienced strange behavior though. Probably not related to your changes but let's see.
I have a dashboard that has many variables defined. I clicked variables and click one of the existing ones which has the query type "label values". To test wrapping I clicked the plus button multiple times. It works nice and well. But after a while (a couple of seconds later) all my empty label filters are gone. I see that in the network tab, there are some queries that keep running in the background. Dashboard has a 5s refresh setting. Each time I got the result from api/v1/series endpoint the filters are gone.

bohandley · 2023-06-16T15:09:01Z

The wrapping looks good.

I experienced strange behavior though. Probably not related to your changes but let's see. I have a dashboard that has many variables defined. I clicked variables and click one of the existing ones which has the query type "label values". To test wrapping I clicked the plus button multiple times. It works nice and well. But after a while (a couple of seconds later) all my empty label filters are gone. I see that in the network tab, there are some queries that keep running in the background. Dashboard has a 5s refresh setting. Each time I got the result from api/v1/series endpoint the filters are gone.

I was not able to reproduce this. It could be a timing issue due to dashboard setup? I have tried this with a prometheus instance and cortex but cannot reproduce this. After our discussion on slack, we are attributing this to a dashboard setup. I will make a note of this issue for future work. Thank you!

Screen.Recording.2023-06-16.at.10.05.27.AM.mov

itsmylife · 2023-06-16T15:14:35Z

The wrapping looks good.
I experienced strange behavior though. Probably not related to your changes but let's see. I have a dashboard that has many variables defined. I clicked variables and click one of the existing ones which has the query type "label values". To test wrapping I clicked the plus button multiple times. It works nice and well. But after a while (a couple of seconds later) all my empty label filters are gone. I see that in the network tab, there are some queries that keep running in the background. Dashboard has a 5s refresh setting. Each time I got the result from api/v1/series endpoint the filters are gone.

I was not able to reproduce this. It could be a timing issue due to dashboard setup? I have tried this with a prometheus instance and cortex but cannot reproduce this. After our discussion on slack, we are attributing this to a dashboard setup. I will make a note of this issue for future work. Thank you!
Screen.Recording.2023-06-16.at.10.05.27.AM.mov

I created a brand new dashboard (I was using my old one) and tried again. So I cannot reproduce it either :) So I think it is good to go.

* refactor metric select and label filters, add variables to label names dropdown * use MetricsLabelsSection in variable editor * use variable editor UI with MetricsLabelsSection * filter label names by optional metric and allow metric to be cleared * fix tests * testing types for onChangeLabels * testing types for onChangeLabels * testing types for onChangeLabels * Ismails review, remove comment and indent * wrap label filters * improved behavior for selects and inputs, add tests and document behavior

bohandley added 4 commits June 9, 2023 13:40

refactor metric select and label filters, add variables to label name…

08acaa9

…s dropdown

use MetricsLabelsSection in variable editor

e71e2ab

use variable editor UI with MetricsLabelsSection

6613598

filter label names by optional metric and allow metric to be cleared

c1dbd6a

bohandley added area/dashboard/templating datasource/Prometheus area/frontend no-backport Skip backport of PR no-changelog Skip including change in changelog/release notes labels Jun 11, 2023

bohandley added this to the 10.1.x milestone Jun 11, 2023

bohandley self-assigned this Jun 11, 2023

fix tests

4418945

bohandley changed the title ~~Bohandley/use metric select in var editor~~ Prometheus: Variable query editor improvements Jun 12, 2023

bohandley marked this pull request as ready for review June 12, 2023 12:16

bohandley requested review from a team and grafanabot as code owners June 12, 2023 12:16

bohandley mentioned this pull request Jun 12, 2023

Prometheus: use metric select in query variable editor and add variables to dropdowns #67783

Closed

3 tasks

bohandley removed the request for review from grafanabot June 12, 2023 13:56

itsmylife approved these changes Jun 14, 2023

View reviewed changes

bohandley commented Jun 14, 2023

View reviewed changes

bohandley added 3 commits June 14, 2023 11:54

testing types for onChangeLabels

eb58f73

testing types for onChangeLabels

811e03f

testing types for onChangeLabels

eacef7f

Ismails review, remove comment and indent

4952733

wrap label filters

1a92447

improved behavior for selects and inputs, add tests and document beha…

35f8cef

…vior

bohandley merged commit 3425012 into main Jun 16, 2023

bohandley deleted the bohandley/use-metric-select-in-var-editor branch June 16, 2023 19:03

itsmylife mentioned this pull request Aug 1, 2023

Bug Bash 10.1 - Metrics Squad #72678

Closed

ricky-undeadcoders modified the milestones: 10.1.x, 10.1.0 Aug 1, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prometheus: Variable query editor improvements #69884

Prometheus: Variable query editor improvements #69884

bohandley commented Jun 11, 2023 •

edited

Loading

gtk-grafana commented Jun 12, 2023

itsmylife commented Jun 14, 2023

itsmylife commented Jun 14, 2023

itsmylife left a comment

itsmylife Jun 14, 2023

bohandley Jun 14, 2023 •

edited

Loading

itsmylife Jun 16, 2023

gtk-grafana Jun 16, 2023

bohandley Jun 16, 2023

itsmylife Jun 14, 2023

gtk-grafana Jun 14, 2023

bohandley Jun 14, 2023

bohandley Jun 14, 2023

bohandley Jun 14, 2023

bohandley commented Jun 14, 2023 •

edited

Loading

bohandley commented Jun 15, 2023

itsmylife commented Jun 16, 2023

bohandley commented Jun 16, 2023

itsmylife commented Jun 16, 2023

Prometheus: Variable query editor improvements #69884

Prometheus: Variable query editor improvements #69884

Conversation

bohandley commented Jun 11, 2023 • edited Loading

gtk-grafana commented Jun 12, 2023

itsmylife commented Jun 14, 2023

itsmylife commented Jun 14, 2023

itsmylife left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bohandley Jun 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bohandley commented Jun 14, 2023 • edited Loading

bohandley commented Jun 15, 2023

itsmylife commented Jun 16, 2023

bohandley commented Jun 16, 2023

itsmylife commented Jun 16, 2023

bohandley commented Jun 11, 2023 •

edited

Loading

bohandley Jun 14, 2023 •

edited

Loading

bohandley commented Jun 14, 2023 •

edited

Loading