From ea1d3cc3badeeca7d790af3814579e2b6d072e1a Mon Sep 17 00:00:00 2001
From: Konrad Lalik <konradlalik@gmail.com>
Date: Wed, 25 Jun 2025 16:24:32 +0200
Subject: [PATCH] Alerting: List V2 - Add labels popup (#107193)

* Display labels popup when hovering over labels count

* Remove unused imports
---
 .../components/AlertRuleListItem.tsx          | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/public/app/features/alerting/unified/rule-list/components/AlertRuleListItem.tsx b/public/app/features/alerting/unified/rule-list/components/AlertRuleListItem.tsx
index 00a2df7ff8b..3f8c01831e6 100644
--- a/public/app/features/alerting/unified/rule-list/components/AlertRuleListItem.tsx
+++ b/public/app/features/alerting/unified/rule-list/components/AlertRuleListItem.tsx
@@ -9,6 +9,7 @@ import { Rule, RuleGroupIdentifierV2, RuleHealth, RulesSourceIdentifier } from '
 import { Labels, PromAlertingRuleState, RulerRuleDTO, RulesSourceApplication } from 'app/types/unified-alerting-dto';
 
 import { logError } from '../../Analytics';
+import { AlertLabels } from '../../components/AlertLabels';
 import { MetaText } from '../../components/MetaText';
 import { ProvisioningBadge } from '../../components/Provisioning';
 import { PluginOriginBadge } from '../../plugins/PluginOriginBadge';
@@ -103,12 +104,10 @@ export const AlertRuleListItem = (props: AlertRuleListItemProps) => {
     }
   }
 
-  if (labelsSize(labels) > 0) {
+  if (labels && labelsSize(labels) > 0) {
     metadata.push(
       <MetaText icon="tag-alt">
-        <TextLink href={href} variant="bodySmall" color="primary" inline={false}>
-          {pluralize('label', labelsSize(labels), true)}
-        </TextLink>
+        <RuleLabels labels={labels} />
       </MetaText>
     );
   }
@@ -271,6 +270,28 @@ function Summary({ content, error }: SummaryProps) {
   return null;
 }
 
+function RuleLabels({ labels }: { labels: Labels }) {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <Tooltip
+      content={
+        <div className={styles.ruleLabels.tooltip}>
+          <AlertLabels labels={labels} size="sm" />
+        </div>
+      }
+      placement="right"
+      interactive
+    >
+      <div>
+        <Text variant="bodySmall" color="primary">
+          {pluralize('label', labelsSize(labels), true)}
+        </Text>
+      </div>
+    </Tooltip>
+  );
+}
+
 interface EvaluationMetadataProps {
   lastEvaluation?: string;
   evaluationInterval?: string;
@@ -391,6 +412,14 @@ const getStyles = (theme: GrafanaTheme2) => ({
   resetMargin: css({
     margin: 0,
   }),
+  ruleLabels: {
+    tooltip: css({
+      padding: theme.spacing(1),
+    }),
+    text: css({
+      cursor: 'pointer',
+    }),
+  },
 });
 
 export type RuleListItemCommonProps = Pick<