public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Alerting: Improve new list view performance (#108115)

Browse Source
This commit is contained in:
Gilles De Mey
2025-07-15 14:34:21 +00:00
committed by GitHub
parent c06c1b1e8a
commit 8cb6993fe6
4 changed files with 17 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/alerting/unified/api/prometheusApi.ts
+9 -7
View File
@@ -118,18 +118,20 @@ export const prometheusApi = alertingApi.injectEndpoints({
export function usePopulateGrafanaPrometheusApiCache() {
const dispatch = useDispatch();
const populateGroupResponseCache = useCallback(
(group: GrafanaPromRuleGroupDTO) => {
const populateGroupsResponseCache = useCallback(
(groups: GrafanaPromRuleGroupDTO[]) => {
dispatch(
prometheusApi.util.upsertQueryData(
'getGrafanaGroups',
{ folderUid: group.folderUid, groupName: group.name },
{ data: { groups: [group] }, status: 'success' }
prometheusApi.util.upsertQueryEntries(
groups.map((group) => ({
endpointName: 'getGrafanaGroups',
arg: { folderUid: group.folderUid, groupName: group.name, limitAlerts: 0 },
value: { data: { groups: [group] }, status: 'success' },
}))
)
);
},
[dispatch]
);
return { populateGroupResponseCache };
return { populateGroupsResponseCache };
}
public/app/features/alerting/unified/rule-list/PaginatedDataSourceLoader.tsx
+1 -3
View File
@@ -51,9 +51,7 @@ function PaginatedGroupsLoader({ rulesSourceIdentifier, application, groupFilter
const hasFilters = Boolean(groupFilter || namespaceFilter);
const { uid, name } = rulesSourceIdentifier;
const prometheusGroupsGenerator = usePrometheusGroupsGenerator({
populateCache: hasFilters ? false : true,
});
const prometheusGroupsGenerator = usePrometheusGroupsGenerator();
// If there are no filters we can match one frontend page to one API page.
// However, if there are filters, we need to fetch more groups from the API to populate one frontend page
public/app/features/alerting/unified/rule-list/hooks/prometheusGroupsGenerator.ts
+6 -32
View File
@@ -1,10 +1,9 @@
import { useCallback } from 'react';
import { useDispatch } from 'app/types/store';
import { DataSourceRulesSourceIdentifier, RuleHealth } from 'app/types/unified-alerting';
import { PromAlertingRuleState, PromRuleGroupDTO } from 'app/types/unified-alerting-dto';
import { PromRulesResponse, prometheusApi } from '../../api/prometheusApi';
import { PromRulesResponse, prometheusApi, usePopulateGrafanaPrometheusApiCache } from '../../api/prometheusApi';
const { useLazyGetGroupsQuery, useLazyGetGrafanaGroupsQuery } = prometheusApi;
@@ -22,8 +21,7 @@ interface FetchGroupsOptions {
groupNextToken?: string;
}
export function usePrometheusGroupsGenerator(hookOptions: UseGeneratorHookOptions = {}) {
const dispatch = useDispatch();
export function usePrometheusGroupsGenerator() {
const [getGroups] = useLazyGetGroupsQuery();
return useCallback(
@@ -35,24 +33,12 @@ export function usePrometheusGroupsGenerator(hookOptions: UseGeneratorHookOption
...fetchOptions,
}).unwrap();
if (hookOptions.populateCache) {
response.data.groups.forEach((group) => {
dispatch(
prometheusApi.util.upsertQueryData(
'getGroups',
{ ruleSource: { uid: ruleSource.uid }, namespace: group.file, groupName: group.name },
{ data: { groups: [group] }, status: 'success' }
)
);
});
}
return response;
};
yield* genericGroupsGenerator(getRuleSourceGroupsWithCache, groupLimit);
},
[getGroups, dispatch, hookOptions.populateCache]
[getGroups]
);
}
@@ -67,8 +53,8 @@ interface GrafanaFetchGroupsOptions extends FetchGroupsOptions {
}
export function useGrafanaGroupsGenerator(hookOptions: UseGeneratorHookOptions = {}) {
const dispatch = useDispatch();
const [getGrafanaGroups] = useLazyGetGrafanaGroupsQuery();
const { populateGroupsResponseCache } = usePopulateGrafanaPrometheusApiCache();
const getGroupsAndProvideCache = useCallback(
async (fetchOptions: GrafanaFetchGroupsOptions) => {
@@ -78,25 +64,13 @@ export function useGrafanaGroupsGenerator(hookOptions: UseGeneratorHookOptions =
...fetchOptions.filter,
}).unwrap();
// This is not mandatory to preload ruler rules, but it improves the UX
// Because the user waits a bit longer for the initial load but doesn't need to wait for each group to be loaded
if (hookOptions.populateCache) {
const cacheAndRulerPreload = response.data.groups.map(async (group) => {
await dispatch(
prometheusApi.util.upsertQueryData(
'getGrafanaGroups',
{ folderUid: group.folderUid, groupName: group.name, limitAlerts: hookOptions.limitAlerts },
{ data: { groups: [group] }, status: 'success' }
)
);
});
await Promise.allSettled(cacheAndRulerPreload);
populateGroupsResponseCache(response.data.groups);
}
return response;
},
[getGrafanaGroups, dispatch, hookOptions.populateCache, hookOptions.limitAlerts]
[getGrafanaGroups, hookOptions.limitAlerts, hookOptions.populateCache, populateGroupsResponseCache]
);
return useCallback(
public/app/features/alerting/unified/rule-list/hooks/useFilteredRulesIterator.ts
+1 -6
View File
@@ -15,7 +15,6 @@ import {
PromRuleGroupDTO,
} from 'app/types/unified-alerting-dto';
import { usePopulateGrafanaPrometheusApiCache } from '../../api/prometheusApi';
import { RulesFilter } from '../../search/rulesSearchParser';
import {
getDataSourceByUid,
@@ -52,7 +51,6 @@ interface GetIteratorResult {
}
export function useFilteredRulesIteratorProvider() {
const { populateGroupResponseCache } = usePopulateGrafanaPrometheusApiCache();
const allExternalRulesSources = getExternalRulesSources();
const prometheusGroupsGenerator = usePrometheusGroupsGenerator();
@@ -76,10 +74,7 @@ export function useFilteredRulesIteratorProvider() {
concatMap((groups) =>
groups
.filter((group) => groupFilter(group, normalizedFilterState))
.flatMap((group) => {
populateGroupResponseCache(group);
return group.rules.map((rule) => [group, rule] as const);
})
.flatMap((group) => group.rules.map((rule) => [group, rule] as const))
.filter(([, rule]) => ruleFilter(rule, normalizedFilterState))
.map(([group, rule]) => mapGrafanaRuleToRuleWithOrigin(group, rule))
),