Alerting: Display correct results when using different filters on alerting panels

[VikaCep]

What is this feature?

Fixes an issue where showing several alerting panels within a dashboard don't respect each panel's alert state filter settings.

Why do we need this feature?

To be able to respect alert state filters within a dashboard with several alerting panels.

Who is this feature for?

All users

Which issue(s) does this PR fix?:

Fixes https://github.com/grafana/support-escalations/issues/6423

Special notes for your reviewer:

When loading several alert list panels where each panel uses a different state filter, the request called to obtain the rules information remains the same. It doesn't trigger a new request if the param changes (in the example state=pending and state=firing are different filters that should trigger a separate request each).

After some investigation we concluded the reason behind this is the Redux store keeps the data from the latest loaded panel. This started happening after the filtering logic was moved to the backend. In order to fix this, a potential solution (that is implemented in this PR) is to fetch the grafana alert rules using RTK query instead of getting it from the store for prom rules, which are the ones that are filtered in the backend.

We are only getting promrules from RTKQ instead of the Redux Store for grafana managed alerts because so far, are the only ones that the filter is done in the BE.

Before - Only one request with state=firing when there is one missing with state=pending.

Before - Two requests with state=firing and state=pending after forcing the request calls. The problem here is that the firing panel is not showing all instances due an incorrect result from the redux store.

After - Using RTK Query the panels show the correct instances as we skip reading it from the store.

[soniaAguilarPeiron]

Great job! 🚀
I added some non-blocking comments

[gillesdemey]

Code changes LGTM, and I can't repro the bug on this branch – awesome work! 🚀

[soniaAguilarPeiron]

I would add in the PR description that we are only getting promrules from RTKQ instead of the Redux Store for grafana managed alerts because so far, are the only ones that the filter is done in the BE. @VikaCep

[grafana-delivery-bot]

The backport to v10.0.x failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new branch
git switch --create backport-70482-to-v10.0.x origin/v10.0.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x f17c49e632775a6c96d6c9361d2a3c9c80ca9e67
# When the conflicts are resolved, stage and commit the changes
git add . && git cherry-pick --continue
# If you have the GitHub CLI installed: Push the branch to GitHub and a PR:
gh pr create --title "[v10.0.x] Alerting: Display correct results when using different filters on alerting panels" --body "Backport f17c49e632775a6c96d6c9361d2a3c9c80ca9e67 from #70482" --label backport --base v10.0.x --milestone 10.0.x --web
# If you don't have the GitHub CLI installed: Push the branch to GitHub and manually create a PR:
git push --set-upstream origin backport-70482-to-v10.0.x
# Remove the local backport branch
git switch main
git branch -D backport-70482-to-v10.0.x

Unless you've used the GitHub CLI above, now create a pull request where the base branch is v10.0.x and the compare/head branch is backport-70482-to-v10.0.x.