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 (
- {dataSources.map((dataSource) => {
- return (
-
-
-
- );
- })}
+ {dataSources.map((dataSource) => (
+ {children}}
+ >
+
+
+ ))}
+
+ {singleSource ? (
+
+ {label}
+
+ ) : (
+
+ {label}
+
+ )}
);
});
@@ -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 */}
{icon}
-
+
{/* title */}
{title}
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"