;
size?: LabelSize;
}
-export const AlertLabels = ({ labels, size }: Props) => {
+export const AlertLabels = ({ labels, commonLabels = {}, size }: Props) => {
const styles = useStyles2((theme) => getStyles(theme, size));
- const pairs = chain(labels).toPairs().reject(isPrivateKey).value();
+ const [showCommonLabels, setShowCommonLabels] = useState(false);
+
+ const labelsToShow = chain(labels)
+ .toPairs()
+ .reject(isPrivateKey)
+ .reject(([key]) => (showCommonLabels ? false : key in commonLabels))
+ .value();
+
+ const commonLabelsCount = Object.keys(commonLabels).length;
+ const hasCommonLabels = commonLabelsCount > 0;
return (
- {pairs.map(([label, value]) => (
+ {labelsToShow.map(([label, value]) => (
))}
+ {!showCommonLabels && hasCommonLabels && (
+
+ )}
+ {showCommonLabels && hasCommonLabels && (
+
+ )}
);
};
@@ -35,6 +69,7 @@ const getStyles = (theme: GrafanaTheme2, size?: LabelSize) => ({
wrapper: css`
display: flex;
flex-wrap: wrap;
+ align-items: center;
gap: ${size === 'md' ? theme.spacing() : theme.spacing(0.5)};
`,
diff --git a/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
index dd2bd4302dc..4096e0e1792 100644
--- a/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
+++ b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
@@ -1,6 +1,6 @@
import React, { useMemo } from 'react';
-import { dateTime } from '@grafana/data';
+import { dateTime, findCommonLabels } from '@grafana/data';
import { Alert, PaginationProps } from 'app/types/unified-alerting';
import { alertInstanceKey } from '../../utils/rules';
@@ -16,17 +16,27 @@ interface Props {
footerRow?: JSX.Element;
}
-type AlertTableColumnProps = DynamicTableColumnProps;
-type AlertTableItemProps = DynamicTableItemProps;
+interface AlertWithCommonLabels extends Alert {
+ commonLabels?: Record;
+}
+
+type AlertTableColumnProps = DynamicTableColumnProps;
+type AlertTableItemProps = DynamicTableItemProps;
export const AlertInstancesTable = ({ instances, pagination, footerRow }: Props) => {
+ const commonLabels = useMemo(() => {
+ // only compute the common labels if we have more than 1 instance, if we don't then that single instance
+ // will have the complete set of common labels and no unique ones
+ return instances.length > 1 ? findCommonLabels(instances.map((instance) => instance.labels)) : {};
+ }, [instances]);
+
const items = useMemo(
(): AlertTableItemProps[] =>
instances.map((instance) => ({
- data: instance,
+ data: { ...instance, commonLabels },
id: alertInstanceKey(instance),
})),
- [instances]
+ [commonLabels, instances]
);
return (
@@ -53,7 +63,9 @@ const columns: AlertTableColumnProps[] = [
id: 'labels',
label: 'Labels',
// eslint-disable-next-line react/display-name
- renderCell: ({ data: { labels } }) => ,
+ renderCell: ({ data: { labels, commonLabels } }) => (
+
+ ),
},
{
id: 'created',