Prometheus: New instant query results view in Explore #60479

gtk-grafana · 2022-12-16T16:22:31Z

What this PR does / why we need it:
Addresses concerns with UI in explorer with instant prometheus results.
#32475

This PR adds a new option to the datasources to present a "Raw" prometheus view, which presents prometheus specific UI in addition to the table view and lets users toggle between them. This new view is the default for prometheus instant query results.

TLDR:
Users want to be able to copy and paste prometheus results, and the table view is almost unusable for large queries, which is pushing people to the vanilla prometheus UI.

Which issue(s) this PR fixes:
#32475
But note this PR does not add any functionality for searching through results using browser search, the component introduced in this PR is virtualized, and thus will not be searchable via native browser search. We will create another issue to deal with making query results searchable, and only deal with the other usability concerns surfaced in that issue.

Fixes #32475

Special notes for your reviewer:

The functionality of this PR aims to emulate the behavior of the native prometheus UI in regard to query results, I would suggest any result in grafana that is different (in order, or content) from the native prometheus UI query results is a bug and should be addressed before release.
Where this diverges from prometheus is the ability to compare values across series, or between various computations on the same metric in separate queries. While this new UI isn't intended to provide the ability to compare results from more than 10 queries simultaneously, it typically works well for multiple queries in most of my testing.
This should be considered in alpha or beta, I'd love to get more feedback on this and continue iterating, but at this point (as long as I found all the bugs) I'd like to say this is ready to launch if it's helpful in more use-cases then the table view. For example, the new UI works better with high cardinality databases and large queries (especially for results with many labels that result in tables with many columns).

…etterer to include new type assertions

…UI, matching native prometheus UX to return the permutations of the first attribute

…n explore

… share implementation with table view

…temsFromDataFrame

…esults-UX-improvements

Elfo404

Overall looks good. it'd be nice to use more theme tokens instead of hardcoded values if possible. i've left a few more (easy) comments for things i missed when i first reviewed it, if we can fix them then i think we are good to go 🚀

public/app/features/explore/RawPrometheusContainer.test.tsx

public/app/features/explore/TableContainer.test.tsx

public/app/features/explore/utils/decorators.test.ts

public/app/features/explore/PrometheusListView/ItemValues.test.tsx

public/app/features/explore/PrometheusListView/RawListContainer.tsx

public/app/features/explore/PrometheusListView/RawListItem.tsx

public/app/features/explore/PrometheusListView/RawListItemAttributes.tsx

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

Elfo404

LGTM! 🚀

…esults-UX-improvements__temp-value-navigation

obetomuniz and others added 30 commits September 20, 2022 17:54

Draft UX improvements to Instant query type results

9738ae1

WIP: implementing UI...

f457187

update styles and type assertions

b212e2f

remove type assertion

bb2e269

refactor raw list into separate functional components, force update b…

0bca31e

…etterer to include new type assertions

add unit tests, document, add markup

d221dac

refactor and fix broken unit tests

d50345d

run prettier

8f1ed3d

implement feedback from UX call, remove todos

ef1cbed

remove debug comments and todo

9249b6d

refactor enum

b9d1592

fix bug in which results without series labels would not display any …

e010de1

…UI, matching native prometheus UX to return the permutations of the first attribute

make prometheus specific

6509cdd

fix unit tests

424b755

add rawPrometheus table UI tweaks as new preferredVisualisationType i…

e529adf

…n explore

implement intial PR review feedback

d986a56

fix broken logic, update comments

82faecc

fix broken unit tests, comment

1574a73

fix bug in which two instances of the TableContainer were being rendered

346cc8d

Review feedback

d44dd0d

refactor anonymous function

033023c

update hardcoded styles to use theme colors, remove unused styles/markup

ed05643

add unit test for getRawPrometheusListItemsFromDataFrame function

2ace4a9

implement PR feedback, refactor raw prometheus list view to no longer…

c3cd6fc

… share implementation with table view

fix broken unit test caused by runtime error in getRawPrometheusListI…

e99d3f6

…temsFromDataFrame

refactor components into new directory

5127038

Merge remote-tracking branch 'origin/main' into gtk-grafana/instant-r…

56b7dce

…esults-UX-improvements

swap order of table and prometheus observables to decorateData

89ecbdd

fix typo

18e61ec

Merge remote-tracking branch 'origin/main' into gtk-grafana/instant-r…

515e195

…esults-UX-improvements

grafanabot added enterprise-ok and removed enterprise-failed labels Jan 3, 2023

Elfo404 requested changes Jan 4, 2023

View reviewed changes

gtk-grafana and others added 7 commits January 4, 2023 07:18

Update public/app/features/explore/RawPrometheusContainer.test.tsx

fa3ea0a

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

Update public/app/features/explore/TableContainer.test.tsx

ef3143d

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

Update public/app/features/explore/utils/decorators.test.ts

c680c7c

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

remove mock function

9db727f

remove old mobile class

063cafd

remove redundant button role

ed1a952

remove unused css class

9c82150

gtk-grafana requested a review from Elfo404 January 4, 2023 13:33

import defaultTimeRange function

2373f51

grafanabot added enterprise-failed and removed enterprise-ok labels Jan 4, 2023

Elfo404 approved these changes Jan 4, 2023

View reviewed changes

add import

ad3f7d3

gtk-grafana modified the milestones: 9.3.3, 9.4.0 Jan 4, 2023

gtk-grafana added 2 commits January 4, 2023 09:42

remove unused import

9cccaa9

Merge remote-tracking branch 'origin/main' into gtk-grafana/instant-r…

766d049

…esults-UX-improvements__temp-value-navigation

grafanabot added enterprise-ok and removed enterprise-failed labels Jan 4, 2023

gtk-grafana merged commit 0e26524 into main Jan 4, 2023

gtk-grafana deleted the gtk-grafana/instant-results-UX-improvements__temp-value-navigation branch January 4, 2023 16:46

bohandley mentioned this pull request Jan 23, 2023

Grafana 10 Getting Started: Prometheus #57754

Closed

dsotirakis modified the milestones: 9.4.0, 9.4.0-beta1 Jan 30, 2023

bohandley added the onboarding label Mar 20, 2023

gtk-grafana mentioned this pull request Mar 23, 2023

Prometheus: Raw or Table choice not persisted in explore URL #65228

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prometheus: New instant query results view in Explore #60479

Prometheus: New instant query results view in Explore #60479

gtk-grafana commented Dec 16, 2022 •

edited

Elfo404 left a comment

Elfo404 left a comment

Prometheus: New instant query results view in Explore #60479

Prometheus: New instant query results view in Explore #60479

Conversation

gtk-grafana commented Dec 16, 2022 • edited

Elfo404 left a comment

Choose a reason for hiding this comment

Elfo404 left a comment

Choose a reason for hiding this comment

gtk-grafana commented Dec 16, 2022 •

edited