Alerting: Minor papercut for data sources in the list view (#110460)

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({

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>

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"