Alerting: Display correct results when using different filters on ale…

…rting panels (#70482)

* Trigger separate rules request for each alerting panel in a dashboard

* Add RTK method to fetch prom rules

* Use RTKQuery to get prom rules in UnifiedAlertList

* Fix lint

* Mock promRules call

* Address PR comments

* Fix tests

public/app/features/alerting/unified/api/alertRuleApi.ts

@@ -1,10 +1,26 @@
 import { RelativeTimeRange } from '@grafana/data';
-import { AlertQuery, Annotations, GrafanaAlertStateDecision, Labels } from 'app/types/unified-alerting-dto';
+import { Matcher } from 'app/plugins/datasource/alertmanager/types';
+import { RuleIdentifier, RuleNamespace } from 'app/types/unified-alerting';
+import {
+  AlertQuery,
+  Annotations,
+  GrafanaAlertStateDecision,
+  Labels,
+  PromRulesResponse,
+} from 'app/types/unified-alerting-dto';
 
 import { Folder } from '../components/rule-editor/RuleFolderPicker';
+import { GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';
 import { arrayKeyValuesToObject } from '../utils/labels';
+import { isCloudRuleIdentifier, isPrometheusRuleIdentifier } from '../utils/rules';
 
 import { alertingApi } from './alertingApi';
+import {
+  FetchPromRulesFilter,
+  groupRulesByFileName,
+  paramsWithMatcherAndState,
+  prepareRulesFilterQueryParams,
+} from './prometheus';
 
 export type ResponseLabels = {
   labels: AlertInstances[];
@@ -17,6 +33,8 @@ export interface Datasource {
 }
 
 export const PREVIEW_URL = '/api/v1/rule/test/grafana';
+export const PROM_RULES_URL = 'api/prometheus/grafana/api/v1/rules';
+
 export interface Data {
   refId: string;
   relativeTimeRange: RelativeTimeRange;
@@ -76,5 +94,38 @@ export const alertRuleApi = alertingApi.injectEndpoints({
         method: 'POST',
       }),
     }),
+
+    prometheusRulesByNamespace: build.query<
+      RuleNamespace[],
+      {
+        limitAlerts?: number;
+        identifier?: RuleIdentifier;
+        filter?: FetchPromRulesFilter;
+        state?: string[];
+        matcher?: Matcher[];
+      }
+    >({
+      query: ({ limitAlerts, identifier, filter, state, matcher }) => {
+        const searchParams = new URLSearchParams();
+
+        // if we're fetching for Grafana managed rules, we should add a limit to the number of alert instances
+        // we do this because the response is large otherwise and we don't show all of them in the UI anyway.
+        if (limitAlerts) {
+          searchParams.set('limit_alerts', String(limitAlerts));
+        }
+
+        if (identifier && (isPrometheusRuleIdentifier(identifier) || isCloudRuleIdentifier(identifier))) {
+          searchParams.set('file', identifier.namespace);
+          searchParams.set('rule_group', identifier.groupName);
+        }
+
+        const params = prepareRulesFilterQueryParams(searchParams, filter);
+
+        return { url: PROM_RULES_URL, params: paramsWithMatcherAndState(params, state, matcher) };
+      },
+      transformResponse: (response: PromRulesResponse): RuleNamespace[] => {
+        return groupRulesByFileName(response.data.groups, GRAFANA_RULES_SOURCE_NAME);
+      },
+    }),
   }),
 });

public/app/features/alerting/unified/api/prometheus.ts

@@ -3,7 +3,7 @@ import { lastValueFrom } from 'rxjs';
 import { getBackendSrv } from '@grafana/runtime';
 import { Matcher } from 'app/plugins/datasource/alertmanager/types';
 import { RuleIdentifier, RuleNamespace } from 'app/types/unified-alerting';
-import { PromRulesResponse } from 'app/types/unified-alerting-dto';
+import { PromRuleGroupDTO, PromRulesResponse } from 'app/types/unified-alerting-dto';
 
 import { getDatasourceAPIUid, GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';
 import { isCloudRuleIdentifier, isPrometheusRuleIdentifier } from '../utils/rules';
@@ -83,6 +83,26 @@ export function paramsWithMatcherAndState(
   return paramsResult;
 }
 
+export const groupRulesByFileName = (groups: PromRuleGroupDTO[], dataSourceName: string) => {
+  const nsMap: { [key: string]: RuleNamespace } = {};
+  groups.forEach((group) => {
+    group.rules.forEach((rule) => {
+      rule.query = rule.query || '';
+    });
+    if (!nsMap[group.file]) {
+      nsMap[group.file] = {
+        dataSourceName,
+        name: group.file,
+        groups: [group],
+      };
+    } else {
+      nsMap[group.file].groups.push(group);
+    }
+  });
+
+  return Object.values(nsMap);
+};
+
 export async function fetchRules(
   dataSourceName: string,
   filter?: FetchPromRulesFilter,
@@ -116,21 +136,5 @@ export async function fetchRules(
     throw e;
   });
 
-  const nsMap: { [key: string]: RuleNamespace } = {};
-  response.data.data.groups.forEach((group) => {
-    group.rules.forEach((rule) => {
-      rule.query = rule.query || '';
-    });
-    if (!nsMap[group.file]) {
-      nsMap[group.file] = {
-        dataSourceName,
-        name: group.file,
-        groups: [group],
-      };
-    } else {
-      nsMap[group.file].groups.push(group);
-    }
-  });
-
-  return Object.values(nsMap);
+  return groupRulesByFileName(response.data.data.groups, dataSourceName);
 }

public/app/features/alerting/unified/hooks/useCombinedRuleNamespaces.ts

@@ -24,6 +24,7 @@ import {
 import {
   getAllRulesSources,
   getRulesSourceByName,
+  GRAFANA_RULES_SOURCE_NAME,
   isCloudRulesSource,
   isGrafanaRulesSource,
 } from '../utils/datasource';
@@ -45,7 +46,10 @@ interface CacheValue {
 
 // this little monster combines prometheus rules and ruler rules to produce a unified data structure
 // can limit to a single rules source
-export function useCombinedRuleNamespaces(rulesSourceName?: string): CombinedRuleNamespace[] {
+export function useCombinedRuleNamespaces(
+  rulesSourceName?: string,
+  grafanaPromRuleNamespaces?: RuleNamespace[]
+): CombinedRuleNamespace[] {
   const promRulesResponses = useUnifiedAlertingSelector((state) => state.promRules);
   const rulerRulesResponses = useUnifiedAlertingSelector((state) => state.rulerRules);
 
@@ -67,9 +71,13 @@ export function useCombinedRuleNamespaces(rulesSourceName?: string): CombinedRul
     return rulesSources
       .map((rulesSource): CombinedRuleNamespace[] => {
         const rulesSourceName = isCloudRulesSource(rulesSource) ? rulesSource.name : rulesSource;
-        const promRules = promRulesResponses[rulesSourceName]?.result;
         const rulerRules = rulerRulesResponses[rulesSourceName]?.result;
 
+        let promRules = promRulesResponses[rulesSourceName]?.result;
+        if (rulesSourceName === GRAFANA_RULES_SOURCE_NAME && grafanaPromRuleNamespaces) {
+          promRules = grafanaPromRuleNamespaces;
+        }
+
         const cached = cache.current[rulesSourceName];
         if (cached && cached.promRules === promRules && cached.rulerRules === rulerRules) {
           return cached.result;
@@ -104,7 +112,7 @@ export function useCombinedRuleNamespaces(rulesSourceName?: string): CombinedRul
         return result;
       })
       .flat();
-  }, [promRulesResponses, rulerRulesResponses, rulesSources]);
+  }, [promRulesResponses, rulerRulesResponses, rulesSources, grafanaPromRuleNamespaces]);
 }
 
 // merge all groups in case of grafana managed, essentially treating namespaces (folders) as groups

public/app/features/alerting/unified/mocks/alertRuleApi.ts

@@ -1,8 +1,14 @@
 import { rest } from 'msw';
 import { SetupServer } from 'msw/node';
 
-import { PreviewResponse, PREVIEW_URL } from '../api/alertRuleApi';
+import { PromRulesResponse } from 'app/types/unified-alerting-dto';
+
+import { PreviewResponse, PREVIEW_URL, PROM_RULES_URL } from '../api/alertRuleApi';
 
 export function mockPreviewApiResponse(server: SetupServer, result: PreviewResponse) {
   server.use(rest.post(PREVIEW_URL, (req, res, ctx) => res(ctx.json<PreviewResponse>(result))));
 }
+
+export function mockPromRulesApiResponse(server: SetupServer, result: PromRulesResponse) {
+  server.use(rest.get(PROM_RULES_URL, (req, res, ctx) => res(ctx.json<PromRulesResponse>(result))));
+}

public/app/plugins/panel/alertlist/UnifiedAlertList.tsx

@@ -18,6 +18,7 @@ import {
 import { config } from 'app/core/config';
 import { contextSrv } from 'app/core/services/context_srv';
 import alertDef from 'app/features/alerting/state/alertDef';
+import { alertRuleApi } from 'app/features/alerting/unified/api/alertRuleApi';
 import { INSTANCES_DISPLAY_LIMIT } from 'app/features/alerting/unified/components/rules/RuleDetails';
 import { useCombinedRuleNamespaces } from 'app/features/alerting/unified/hooks/useCombinedRuleNamespaces';
 import { useUnifiedAlertingSelector } from 'app/features/alerting/unified/hooks/useUnifiedAlertingSelector';
@@ -60,6 +61,8 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
   const rulesDataSourceNames = useMemo(getAllRulesSourceNames, []);
   const [limitInstances, toggleLimit] = useToggle(true);
 
+  const { usePrometheusRulesByNamespaceQuery } = alertRuleApi;
+
   // backwards compat for "Inactive" state filter
   useEffect(() => {
     if (props.options.stateFilter.inactive === true) {
@@ -153,9 +156,19 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
 
   const promRulesRequests = useUnifiedAlertingSelector((state) => state.promRules);
   const rulerRulesRequests = useUnifiedAlertingSelector((state) => state.rulerRules);
-  const combinedRules = useCombinedRuleNamespaces();
 
   const somePromRulesDispatched = rulesDataSourceNames.some((name) => promRulesRequests[name]?.dispatched);
+
+  //For grafana managed rules, get the result using RTK Query to avoid the need of using the redux store
+  //See https://github.com/grafana/grafana/pull/70482
+  const { currentData: promRules = [], isLoading: grafanaRulesLoading } = usePrometheusRulesByNamespaceQuery({
+    limitAlerts: limitInstances ? INSTANCES_DISPLAY_LIMIT : undefined,
+    matcher: matcherList,
+    state: stateList,
+  });
+
+  const combinedRules = useCombinedRuleNamespaces(undefined, promRules);
+
   const someRulerRulesDispatched = rulesDataSourceNames.some((name) => rulerRulesRequests[name]?.dispatched);
   const dispatched = somePromRulesDispatched || someRulerRulesDispatched;
 
@@ -183,7 +196,7 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
   return (
     <CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
       <div className={styles.container}>
-        {dispatched && loading && !haveResults && <LoadingPlaceholder text="Loading..." />}
+        {(grafanaRulesLoading || (dispatched && loading && !haveResults)) && <LoadingPlaceholder text="Loading..." />}
         {noAlertsMessage && <div className={styles.noAlertsMessage}>{noAlertsMessage}</div>}
         <section>
           {props.options.viewMode === ViewMode.Stat && haveResults && (