Add filter to homepage

[joey-grafana]

Internal user interviews showed us that users would like the ability to select which service/cluster/etc that are most interested in or simply to see errors/slow traces for an attribute other than resource.service.name. Having spoken with @nadinevehling & @alexbikfalvi, we decided to allow users to add an optional filter for this iteration and based on feedback we will decide if we want to allow them to add more than one filter/create views (something like what Explore Logs does), but for this iteration it was requested to walk before we run :D

Fixes grafana/grafana#99862

[nadinevehling]

@joey-grafana Small feedback, I'd enlarge the spacing between the data source input and the text "filter" sightly to distinguish both filters. Right now, it's hard to tell which belongs together.

[alexbikfalvi]

@joey-grafana @nadinevehling Would it be easy that instead of a single filter option we use the same filter that we have in the app?

Rationale: Keep the same experience that we have in the app, the app filter is more flexible, and we would avoid having to create a new set of interactions.

---

Feedback on the current filter:

• Once I choose a filter attribute, there is no way to clear it.
• When selecting a filter attribute, the number of errors seems incorrect (it only shows "1")

Minor comment: When I selected an attribute in the filter, the "Errors" pane reconfigured to show the errors breakdown by the selected attribute even if I haven't entered an attribute value. However, the "Slow traces" pane didn't change until I selected also a value. This was slightly confusing not knowing if it was a bug or not.

[alexbikfalvi]

Fantastic work @joey-grafana - leaving a few individual comments below.

Error for certain filters

There is an error for certain filters, such as span:name = add-checkout for instance.

The query is the following:

http://localhost:3000/api/datasources/proxy/uid/tempo/api/metrics/query_range?query=%7BnestedSetParent%20%3C%200%20%26%26%20status%20%3D%20error%20%26%26%20span%3Aname%3Dadd-checkout%7D%20%7C%20count_over_time()%20by%20(resource.service.name)&start=1739873095&end=1739874895&step=1800s

answered with 400 Bad Request - compiling query: parse error at line 1, col 53: syntax error: unexpected IDENTIFIER

This could be because of missing quotes around add-checkout, the following query works:

http://localhost:3000/api/datasources/proxy/uid/tempo/api/metrics/query_range?query=%7BnestedSetParent%20%3C%200%20%26%26%20status%20%3D%20error%20%26%26%20span%3Aname%3D%22add-checkout%22%7D%20%7C%20count_over_time()%20by%20(resource.service.name)&start=1739873095&end=1739874895&step=1800s

I think we have a similar issue in the app filter, but there the quotes are added for non-string values. Happy to park this and try to tackle separately.

Not possible to type regex

When choosing a regex match, I can only select from the drop down, but not enter a regex.

If too complex to enable typical values, perhaps we could leave regex out for now.