From a058665bbcd45e4c35859ad10373cf2b2db4d57e Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Tue, 2 Sep 2025 17:05:51 +0200
Subject: [PATCH] Alerting: Minor papercut for data sources in the list view
 (#110460)

---
 .../components/AlertRuleListItem.tsx          | 40 ++++++++++++++-----
 .../unified/rule-list/components/ListItem.tsx |  2 +-
 public/locales/en-US/grafana.json             |  1 +
 3 files changed, 32 insertions(+), 11 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 f6819349f9e..38c5a01e7a0 100644
--- a/public/app/features/alerting/unified/rule-list/components/AlertRuleListItem.tsx
+++ b/public/app/features/alerting/unified/rule-list/components/AlertRuleListItem.tsx
@@ -10,13 +10,14 @@ import { Labels, PromAlertingRuleState, RulerRuleDTO, RulesSourceApplication } f
 
 import { logError } from '../../Analytics';
 import { AlertLabels } from '../../components/AlertLabels';
+import ConditionalWrap from '../../components/ConditionalWrap';
 import { MetaText } from '../../components/MetaText';
 import { ProvisioningBadge } from '../../components/Provisioning';
 import { PluginOriginBadge } from '../../plugins/PluginOriginBadge';
 import { GRAFANA_RULES_SOURCE_NAME, getDataSourceByUid } from '../../utils/datasource';
 import { getGroupOriginName } from '../../utils/groupIdentifier';
 import { labelsSize } from '../../utils/labels';
-import { createContactPointSearchLink } from '../../utils/misc';
+import { createContactPointSearchLink, makeDataSourceLink } from '../../utils/misc';
 import { RulePluginOrigin } from '../../utils/rules';
 
 import { ListItem } from './ListItem';
@@ -314,15 +315,34 @@ const QuerySourceIcons = memo(function QuerySourceIcons({ queriedDatasourceUIDs
     .map(getDataSourceByUid)
     .filter((ds): ds is DataSourceInstanceSettings => ds !== undefined);
 
+  const firstSource = dataSources[0];
+  const singleSource = dataSources.length === 1;
+
+  const label = singleSource
+    ? firstSource.name
+    : t('alerting.alert-rules.multiple-sources', '{{numSources}} data sources', { numSources: dataSources.length });
+
   return (
     <Stack direction="row" alignItems="center" gap={0.5}>
-      {dataSources.map((dataSource) => {
-        return (
-          <Tooltip key={dataSource.uid} content={dataSource.name}>
-            <DataSourceLogo dataSource={dataSource} />
-          </Tooltip>
-        );
-      })}
+      {dataSources.map((dataSource) => (
+        <ConditionalWrap
+          key={dataSource.uid}
+          shouldWrap={!singleSource}
+          wrap={(children) => <Tooltip content={dataSource.name}>{children}</Tooltip>}
+        >
+          <DataSourceLogo dataSource={dataSource} />
+        </ConditionalWrap>
+      ))}
+
+      {singleSource ? (
+        <TextLink variant="bodySmall" inline={false} color="primary" href={makeDataSourceLink(firstSource.uid)}>
+          {label}
+        </TextLink>
+      ) : (
+        <Text variant="bodySmall" color="primary">
+          {label}
+        </Text>
+      )}
     </Stack>
   );
 });
@@ -474,8 +494,8 @@ DataSourceLogo.displayName = 'DataSourceLogo';
 
 const dataSourceLogoStyles = (theme: GrafanaTheme2) => ({
   logo: css({
-    height: '14px',
-    width: '14px',
+    height: '12px',
+    width: '12px',
     borderRadius: theme.shape.radius.default,
   }),
   filter: css({
diff --git a/public/app/features/alerting/unified/rule-list/components/ListItem.tsx b/public/app/features/alerting/unified/rule-list/components/ListItem.tsx
index 0e15e5fb696..c5d82e49dd4 100644
--- a/public/app/features/alerting/unified/rule-list/components/ListItem.tsx
+++ b/public/app/features/alerting/unified/rule-list/components/ListItem.tsx
@@ -31,7 +31,7 @@ export const ListItem = (props: ListItemProps) => {
         {/* icon */}
         <span className={styles.statusIcon}>{icon}</span>
 
-        <Stack direction="column" gap={0} flex="1" minWidth={0}>
+        <Stack direction="column" gap={0.5} flex="1" minWidth={0}>
           {/* title */}
           <Stack direction="column" gap={0}>
             <div className={styles.textOverflow}>{title}</div>
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 91ea7aa9120..a0a0c87740b 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -549,6 +549,7 @@
     },
     "alert-rules": {
       "firing-for": "Firing for",
+      "multiple-sources": "{{numSources}} data sources",
       "next-evaluation": "Next evaluation",
       "next-evaluation-in": "next evaluation in",
       "rule-definition": "Rule definition"