Alerting: Use common labels tooltip in Triage (#113072)

* Add a tooltip mode for common labels and use it in Triage workbench

* Change Tooltip to ToggleTip for displaying common labels

packages/grafana-alerting/src/grafana/rules/components/labels/AlertLabels.tsx

@@ -1,10 +1,10 @@
 import { css } from '@emotion/css';
 import { chain } from 'lodash';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
-import { Button, useStyles2 } from '@grafana/ui';
+import { Button, Stack, Toggletip, useStyles2 } from '@grafana/ui';
 
 import { findCommonLabels, isPrivateLabel } from '../../utils/labels';
 
@@ -16,14 +16,24 @@ export interface AlertLabelsProps {
   labelSets?: Array<Record<string, string>>;
   size?: LabelSize;
   onClick?: ([value, key]: [string | undefined, string | undefined]) => void;
+  commonLabelsMode?: 'expand' | 'tooltip';
 }
 
-export const AlertLabels = ({ labels, displayCommonLabels, labelSets, size, onClick }: AlertLabelsProps) => {
+export const AlertLabels = ({
+  labels,
+  displayCommonLabels,
+  labelSets,
+  size,
+  onClick,
+  commonLabelsMode = 'expand',
+}: AlertLabelsProps) => {
   const styles = useStyles2(getStyles, size);
   const [showCommonLabels, setShowCommonLabels] = useState(false);
 
-  const computedCommonLabels =
-    displayCommonLabels && Array.isArray(labelSets) && labelSets.length > 1 ? findCommonLabels(labelSets) : {};
+  const computedCommonLabels = useMemo(
+    () => (displayCommonLabels && Array.isArray(labelSets) && labelSets.length > 1 ? findCommonLabels(labelSets) : {}),
+    [displayCommonLabels, labelSets]
+  );
 
   const labelsToShow = chain(labels)
     .toPairs()
@@ -35,6 +45,17 @@ export const AlertLabels = ({ labels, displayCommonLabels, labelSets, size, onCl
   const hasCommonLabels = commonLabelsCount > 0;
   const tooltip = t('alert-labels.button.show.tooltip', 'Show common labels');
 
+  const commonLabelsTooltip = useMemo(
+    () => (
+      <Stack data-testid="common-labels-tooltip-content" role="list" direction="row" wrap="wrap" gap={1} width={48}>
+        {Object.entries(computedCommonLabels).map(([label, value]) => (
+          <AlertLabel key={label + value} size={size} labelKey={label} value={value} colorBy="key" role="listitem" />
+        ))}
+      </Stack>
+    ),
+    [computedCommonLabels, size]
+  );
+
   return (
     <div className={styles.wrapper} role="list" aria-label={t('alerting.alert-labels.aria-label-labels', 'Labels')}>
       {labelsToShow.map(([label, value]) => {
@@ -53,18 +74,28 @@ export const AlertLabels = ({ labels, displayCommonLabels, labelSets, size, onCl
 
       {!showCommonLabels && hasCommonLabels && (
         <div role="listitem">
-          <Button
-            variant="secondary"
-            fill="text"
-            onClick={() => setShowCommonLabels(true)}
-            tooltip={tooltip}
-            tooltipPlacement="top"
-            size="sm"
-          >
-            <Trans i18nKey="alerting.alert-labels.common-labels-count" count={commonLabelsCount}>
-              +{'{{count}}'} common labels
-            </Trans>
-          </Button>
+          {commonLabelsMode === 'expand' ? (
+            <Button
+              variant="secondary"
+              fill="text"
+              onClick={() => setShowCommonLabels(true)}
+              tooltip={tooltip}
+              tooltipPlacement="top"
+              size="sm"
+            >
+              <Trans i18nKey="alerting.alert-labels.common-labels-count" count={commonLabelsCount}>
+                +{'{{count}}'} common labels
+              </Trans>
+            </Button>
+          ) : (
+            <Toggletip content={commonLabelsTooltip} closeButton={false} fitContent={true}>
+              <Button data-testid="common-labels-tooltip-trigger" variant="secondary" fill="text" size="sm">
+                <Trans i18nKey="alerting.alert-labels.common-labels-count" count={commonLabelsCount}>
+                  +{'{{count}}'} common labels
+                </Trans>
+              </Button>
+            </Toggletip>
+          )}
         </div>
       )}
       {showCommonLabels && hasCommonLabels && (

public/app/features/alerting/unified/triage/rows/InstanceRow.tsx

@@ -112,6 +112,7 @@ export function InstanceRow({
               displayCommonLabels={true}
               labelSets={[instance.labels, commonLabels]}
               size="xs"
+              commonLabelsMode="tooltip"
             />
           )
         }