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 (
-