Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Alerting: Paginate result previews #65257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 4 commits into from
Mar 23, 2023
Merged

Alerting: Paginate result previews #65257

merged 4 commits into from
Mar 23, 2023

Conversation

@gillesdemey
Copy link
Contributor

@gillesdemey gillesdemey commented Mar 23, 2023

What is this feature?

Adds a pagination to the bottom of expression results when previewing alerts from a data query with more than 20 series (multi-dimensional alert rule).

image

Why do we need this feature?

Large query results could crash the browser (10k+)

Which issue(s) does this PR fix?:

Fixes #64830

Special notes for your reviewer:

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.
  • There are no known compatibility issues with older supported versions of Grafana, or plugins.
  • It passes the Hosted Grafana feature readiness review for observability, scalability, performance, and security.

@gillesdemey gillesdemey added type/bug area/alerting Grafana Alerting area/frontend add to changelog backport v9.4.x Mark PR for automatic backport to v9.4.x labels Mar 23, 2023
@gillesdemey gillesdemey added this to the 9.4.x milestone Mar 23, 2023
@gillesdemey gillesdemey requested a review from a team March 23, 2023 11:11
@gillesdemey gillesdemey mentioned this pull request Mar 23, 2023
Closed
@github-advanced-security

This comment was marked as off-topic.

Sign in to view
konrad147
konrad147 approved these changes Mar 23, 2023
View reviewed changes
Copy link
Contributor

@konrad147 konrad147 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! one nit

public/app/features/alerting/unified/components/expressions/Expression.tsx Outdated
// sometimes we receive results where every value is just "null" when noData occurs
const emptyResults = isEmptySeries(series);
const isTimeSeriesResults = !emptyResults && isTimeSeriesFrames(series);
const resultPages = chunk(series, PAGE_SIZE);
Copy link
Contributor

@konrad147 konrad147 Mar 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can try to use usePagination hook (from (public/app/features/alerting/unified/hooks/usePagination.ts) to remove some of the pagination handling code.

Copy link
Contributor

@soniaAguilarPeiron soniaAguilarPeiron Mar 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We thought that for this particular case it would be more simple and clear to use chunk from lodash (we only go forward and backward, we don't go directly to the page)

Copy link
Contributor

@konrad147 konrad147 Mar 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, but you had to implement pagination logic once again (pageStart, pageEnd, clamp, chunk)

Copy link
Contributor Author

@gillesdemey gillesdemey Mar 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea I think we can re-use that one, I forgot we had that :D It doesn't seem to expose the start and end of the current page but that's easy to add to the hook 👍

Copy link
Contributor

@konrad147 konrad147 Mar 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It exposes numberOfPages which should be enough :)

Copy link
Contributor

@soniaAguilarPeiron soniaAguilarPeiron Mar 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ahh ok! nice!

@gillesdemey @konrad147
use usePagination
5a0772a 
Co-authored-by: konrad147 <[email protected]>
@gillesdemey gillesdemey enabled auto-merge (squash) March 23, 2023 14:02
@gillesdemey gillesdemey disabled auto-merge March 23, 2023 14:07
@gillesdemey
Copy link
Contributor Author

gillesdemey commented Mar 23, 2023

Updated PR with the following changes:

Using usePagination() for the preview results.

Made the following changes to the usePagination() hook:

  • Use clamping in the hook to prevent out-of-bounds access
  • Added nextPage and previousPage which just call onPageChange()
  • pageStart and pageEnd exposed

@gillesdemey gillesdemey merged commit 409bd33 into main Mar 23, 2023
@gillesdemey gillesdemey deleted the alerting/fix-huge-number-instances branch March 23, 2023 14:17
@grafanabot

This comment was marked as resolved.

Sign in to view
@grafanabot grafanabot added the backport-failed Failed to generate backport PR. Please resolve conflicts and create one manually. label Mar 23, 2023
gillesdemey added a commit that referenced this pull request Mar 23, 2023
@gillesdemey @konrad147 @soniaAguilarPeiron
Alerting: Paginate result previews (#65257)
a2ed006 
Co-authored-by: konrad147 <[email protected]>
Co-authored-by: Sonia Aguilar <[email protected]>
(cherry picked from commit 409bd33)
@gillesdemey gillesdemey mentioned this pull request Mar 23, 2023
Merged
gillesdemey added a commit that referenced this pull request Mar 23, 2023
@gillesdemey @konrad147 @soniaAguilarPeiron
Alerting: Paginate result previews (#65257) (#65273)
54fe185 
Co-authored-by: konrad147 <[email protected]>
Co-authored-by: Sonia Aguilar <[email protected]>
@zerok zerok modified the milestones: 9.4.x, 9.4.8, 9.5.0 Apr 12, 2023
@zerok zerok mentioned this pull request Jun 27, 2023
Closed
@gotjosh gotjosh mentioned this pull request Dec 1, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@konrad147 konrad147 konrad147 approved these changes

@soniaAguilarPeiron soniaAguilarPeiron soniaAguilarPeiron left review comments

Assignees

No one assigned

Labels

add to changelog area/alerting Grafana Alerting area/frontend backport v9.4.x Mark PR for automatic backport to v9.4.x backport-failed Failed to generate backport PR. Please resolve conflicts and create one manually. type/bug

Projects

Alerting
Archived in project

Milestone

9.5.0

Development

Successfully merging this pull request may close these issues.

Alerting: large amount of instances crashes browser

5 participants

@gillesdemey @grafanabot @konrad147 @soniaAguilarPeiron @zerok