From 1bd18383637ecacd1e454925b1151d367f83e1ca Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:58:41 -0400
Subject: [PATCH] Alerting: adds variable replacement to panel filters (#47962)
 (#47967)

(cherry picked from commit 459c64fd44f37dda96dca30a93b7750dcee4adf3)

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
---
 .../plugins/panel/alertlist/UnifiedAlertList.tsx   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
index 6d8488d8629..3c18c0e2b2e 100644
--- a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
+++ b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
@@ -49,13 +49,13 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
   const rules = useMemo(
     () =>
       filterRules(
-        props.options,
+        props,
         sortRules(
           props.options.sortOrder,
           Object.values(promRulesRequests).flatMap(({ result = [] }) => flattenRules(result))
         )
       ),
-    [props.options, promRulesRequests]
+    [props, promRulesRequests]
   );
 
   const noAlertsMessage = rules.length ? '' : 'No alerts';
@@ -95,7 +95,9 @@ function sortRules(sortOrder: SortOrder, rules: PromRuleWithLocation[]) {
   return result;
 }
 
-function filterRules(options: PanelProps<UnifiedAlertListOptions>['options'], rules: PromRuleWithLocation[]) {
+function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: PromRuleWithLocation[]) {
+  const { options, replaceVariables } = props;
+
   let filteredRules = [...rules];
   if (options.dashboardAlerts) {
     const dashboardUid = getDashboardSrv().getCurrent()?.uid;
@@ -104,8 +106,9 @@ function filterRules(options: PanelProps<UnifiedAlertListOptions>['options'], ru
     );
   }
   if (options.alertName) {
+    const replacedName = replaceVariables(options.alertName);
     filteredRules = filteredRules.filter(({ rule: { name } }) =>
-      name.toLocaleLowerCase().includes(options.alertName.toLocaleLowerCase())
+      name.toLocaleLowerCase().includes(replacedName.toLocaleLowerCase())
     );
   }
   if (Object.values(options.stateFilter).some((value) => value)) {
@@ -118,7 +121,8 @@ function filterRules(options: PanelProps<UnifiedAlertListOptions>['options'], ru
     });
   }
   if (options.alertInstanceLabelFilter) {
-    const matchers = parseMatchers(options.alertInstanceLabelFilter);
+    const replacedLabelFilter = replaceVariables(options.alertInstanceLabelFilter);
+    const matchers = parseMatchers(replacedLabelFilter);
     // Reduce rules and instances to only those that match
     filteredRules = filteredRules.reduce((rules, rule) => {
       const filteredAlerts = (rule.rule.alerts ?? []).filter(({ labels }) => labelsMatchMatchers(labels, matchers));