From b68166c437acd25a33b6d95ba8d91c5f5ef64dca Mon Sep 17 00:00:00 2001 From: Gilles De Mey Date: Wed, 18 Jun 2025 19:56:42 +0200 Subject: [PATCH] Alerting: Improve group view loading button state (#106922) --- .../unified/rule-list/GroupedView.test.tsx | 24 ++++++++++--------- .../rule-list/PaginatedDataSourceLoader.tsx | 11 ++------- .../rule-list/PaginatedGrafanaLoader.tsx | 11 ++------- .../rule-list/components/LazyPagination.tsx | 17 ------------- .../rule-list/components/LoadMoreButton.tsx | 17 +++++++++---- .../hooks/useLazyLoadPrometheusGroups.tsx | 2 +- public/locales/en-US/grafana.json | 2 +- 7 files changed, 32 insertions(+), 52 deletions(-) delete mode 100644 public/app/features/alerting/unified/rule-list/components/LazyPagination.tsx diff --git a/public/app/features/alerting/unified/rule-list/GroupedView.test.tsx b/public/app/features/alerting/unified/rule-list/GroupedView.test.tsx index 32dcf3d56d0..361d017b4d2 100644 --- a/public/app/features/alerting/unified/rule-list/GroupedView.test.tsx +++ b/public/app/features/alerting/unified/rule-list/GroupedView.test.tsx @@ -38,7 +38,7 @@ beforeEach(() => { const ui = { dsSection: (ds: string | RegExp) => byRole('listitem', { name: ds }), namespace: (ns: string | RegExp) => byRole('treeitem', { name: ns }), - group: (group: string | RegExp) => byRole('treeitem', { name: group }), + group: (group: string | RegExp) => byRole('link', { name: group }), loadMoreButton: () => byRole('button', { name: /Show more/i }), }; @@ -90,24 +90,26 @@ describe('RuleList - GroupedView', () => { const prometheusSection = await ui.dsSection(/Prometheus/).find(); const promNamespace = await ui.namespace(/test-prometheus-namespace/).find(prometheusSection); + const loadMoreButton = ui.loadMoreButton(); // initial load – should have all groups 1-40 - await ui.group(/test-group-([1-9]|[1-3][0-9]|40)/).findAll(promNamespace); + await ui.group('test-group-40').find(promNamespace); // fetch page 2 - const loadMoreButton = await ui.loadMoreButton().find(prometheusSection); - await waitFor(() => expect(loadMoreButton).toBeEnabled()); - + await user.click(await loadMoreButton.find(prometheusSection)); // we should now have all groups 1-80 - await ui.group(/test-group-([1-9]|[1-7][0-9]|80)/).findAll(promNamespace); + await ui.group('test-group-80').find(promNamespace); - // fetch third page - await waitFor(() => expect(loadMoreButton).toBeEnabled()); - await user.click(loadMoreButton); + // fetch page 3 + await user.click(await loadMoreButton.find(prometheusSection)); + // we should now have all groups 1-120 + await ui.group('test-group-120').find(promNamespace); + // fetch page 4 + await user.click(await loadMoreButton.find(prometheusSection)); // we should now have all groups 1-130 - await ui.group(/test-group-([1-9]|[1-9][0-9]|1[0-2][0-9]|130)/).findAll(promNamespace); + await ui.group('test-group-130').find(promNamespace); - expect(loadMoreButton).not.toBeInTheDocument(); + expect(loadMoreButton.query(prometheusSection)).not.toBeInTheDocument(); }); }); diff --git a/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx b/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx index df4f033d6f9..ec3fe298a91 100644 --- a/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx +++ b/public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx @@ -1,8 +1,7 @@ import { groupBy, isEmpty } from 'lodash'; import { useEffect, useMemo, useRef } from 'react'; -import { Trans } from '@grafana/i18n'; -import { Icon, Spinner, Stack, Text } from '@grafana/ui'; +import { Icon, Stack, Text } from '@grafana/ui'; import { DataSourceRuleGroupIdentifier, DataSourceRulesSourceIdentifier, RuleGroup } from 'app/types/unified-alerting'; import { PromRuleGroupDTO } from 'app/types/unified-alerting-dto'; @@ -117,15 +116,9 @@ function PaginatedGroupsLoader({ rulesSourceIdentifier, application, groupFilter {hasMoreGroups && ( // this div will make the button not stretch
- +
)} - {isLoading && ( - - - Loading more groups... - - )} {hasNoRules && } diff --git a/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx b/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx index d3f1c62d43a..4e64afae512 100644 --- a/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx +++ b/public/app/features/alerting/unified/rule-list/PaginatedGrafanaLoader.tsx @@ -1,8 +1,7 @@ import { groupBy, isEmpty } from 'lodash'; import { useEffect, useMemo, useRef } from 'react'; -import { Trans } from '@grafana/i18n'; -import { Icon, Spinner, Stack, Text } from '@grafana/ui'; +import { Icon, Stack, Text } from '@grafana/ui'; import { GrafanaRuleGroupIdentifier, GrafanaRulesSourceSymbol } from 'app/types/unified-alerting'; import { GrafanaPromRuleGroupDTO, PromRuleGroupDTO } from 'app/types/unified-alerting-dto'; @@ -118,15 +117,9 @@ function PaginatedGroupsLoader({ groupFilter, namespaceFilter }: LoaderProps) { {hasMoreGroups && ( // this div will make the button not stretch
- +
)} - {isLoading && ( - - - Loading more groups... - - )} ); diff --git a/public/app/features/alerting/unified/rule-list/components/LazyPagination.tsx b/public/app/features/alerting/unified/rule-list/components/LazyPagination.tsx deleted file mode 100644 index 80b8a210324..00000000000 --- a/public/app/features/alerting/unified/rule-list/components/LazyPagination.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { t } from '@grafana/i18n'; -import { Button } from '@grafana/ui'; - -interface LazyPaginationProps { - loadMore: () => void; - disabled?: boolean; -} - -export function LazyPagination({ loadMore, disabled = false }: LazyPaginationProps) { - const label = t('alerting.rule-list.pagination.next-page', 'Show more…'); - - return ( - - ); -} diff --git a/public/app/features/alerting/unified/rule-list/components/LoadMoreButton.tsx b/public/app/features/alerting/unified/rule-list/components/LoadMoreButton.tsx index c0063b377c6..b77cb272758 100644 --- a/public/app/features/alerting/unified/rule-list/components/LoadMoreButton.tsx +++ b/public/app/features/alerting/unified/rule-list/components/LoadMoreButton.tsx @@ -1,16 +1,25 @@ -import { t } from '@grafana/i18n'; +import { Trans, t } from '@grafana/i18n'; import { Button } from '@grafana/ui'; interface LoadMoreButtonProps { onClick: () => void; + loading?: boolean; } -export function LoadMoreButton({ onClick }: LoadMoreButtonProps) { +export function LoadMoreButton({ onClick, loading = false }: LoadMoreButtonProps) { const label = t('alerting.rule-list.pagination.next-page', 'Show more…'); return ( - ); } diff --git a/public/app/features/alerting/unified/rule-list/hooks/useLazyLoadPrometheusGroups.tsx b/public/app/features/alerting/unified/rule-list/hooks/useLazyLoadPrometheusGroups.tsx index 5181e1a1cd9..eb89b75d8c4 100644 --- a/public/app/features/alerting/unified/rule-list/hooks/useLazyLoadPrometheusGroups.tsx +++ b/public/app/features/alerting/unified/rule-list/hooks/useLazyLoadPrometheusGroups.tsx @@ -59,7 +59,7 @@ export function useLazyLoadPrometheusGroups( isLoading, error: groupsRequestState.error, groups, - hasMoreGroups: !isLoading && hasMoreGroups, + hasMoreGroups, fetchMoreGroups, }; } diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 4d6566e16e6..2f9ca71eb24 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -2413,7 +2413,7 @@ "new-badge": "New!", "text": "Import to Grafana-managed rules" }, - "loading-more-groups": "Loading more groups...", + "loading-more-groups": "Loading more groups…", "more": "More", "new-alert-rule": "New alert rule", "new-datasource-recording-rule": "New Data source recording rule",