{"version":3,"file":"AlertLabels.mjs","sources":["../../../../../../src/grafana/rules/components/labels/AlertLabels.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { chain } from 'lodash';\nimport { useMemo, useState } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Trans, t } from '@grafana/i18n';\nimport { Button, Stack, Toggletip, useStyles2 } from '@grafana/ui';\n\nimport { findCommonLabels, isPrivateLabel } from '../../utils/labels';\n\nimport { AlertLabel, LabelSize } from './AlertLabel';\n\nexport interface AlertLabelsProps {\n  labels: Record<string, string>;\n  displayCommonLabels?: boolean;\n  labelSets?: Array<Record<string, string>>;\n  size?: LabelSize;\n  onClick?: ([value, key]: [string | undefined, string | undefined]) => void;\n  commonLabelsMode?: 'expand' | 'tooltip';\n}\n\nexport const AlertLabels = ({\n  labels,\n  displayCommonLabels,\n  labelSets,\n  size,\n  onClick,\n  commonLabelsMode = 'expand',\n}: AlertLabelsProps) => {\n  const styles = useStyles2(getStyles, size);\n  const [showCommonLabels, setShowCommonLabels] = useState(false);\n\n  const computedCommonLabels = useMemo(\n    () => (displayCommonLabels && Array.isArray(labelSets) && labelSets.length > 1 ? findCommonLabels(labelSets) : {}),\n    [displayCommonLabels, labelSets]\n  );\n\n  const labelsToShow = chain(labels)\n    .toPairs()\n    .reject(isPrivateLabel)\n    .reject(([key]) => (showCommonLabels ? false : key in computedCommonLabels))\n    .value();\n\n  const commonLabelsCount = Object.keys(computedCommonLabels).length;\n  const hasCommonLabels = commonLabelsCount > 0;\n  const tooltip = t('alert-labels.button.show.tooltip', 'Show common labels');\n\n  const commonLabelsTooltip = useMemo(\n    () => (\n      <Stack data-testid=\"common-labels-tooltip-content\" role=\"list\" direction=\"row\" wrap=\"wrap\" gap={1} width={48}>\n        {Object.entries(computedCommonLabels).map(([label, value]) => (\n          <AlertLabel key={label + value} size={size} labelKey={label} value={value} colorBy=\"key\" role=\"listitem\" />\n        ))}\n      </Stack>\n    ),\n    [computedCommonLabels, size]\n  );\n\n  return (\n    <div className={styles.wrapper} role=\"list\" aria-label={t('alerting.alert-labels.aria-label-labels', 'Labels')}>\n      {labelsToShow.map(([label, value]) => {\n        return (\n          <AlertLabel\n            key={label + value}\n            size={size}\n            labelKey={label}\n            value={value}\n            colorBy=\"key\"\n            onClick={onClick}\n            role=\"listitem\"\n          />\n        );\n      })}\n\n      {!showCommonLabels && hasCommonLabels && (\n        <div role=\"listitem\">\n          {commonLabelsMode === 'expand' ? (\n            <Button\n              variant=\"secondary\"\n              fill=\"text\"\n              onClick={() => setShowCommonLabels(true)}\n              tooltip={tooltip}\n              tooltipPlacement=\"top\"\n              size=\"sm\"\n            >\n              <Trans i18nKey=\"alerting.alert-labels.common-labels-count\" count={commonLabelsCount}>\n                +{'{{count}}'} common labels\n              </Trans>\n            </Button>\n          ) : (\n            <Toggletip content={commonLabelsTooltip} closeButton={false} fitContent={true}>\n              <Button data-testid=\"common-labels-tooltip-trigger\" variant=\"secondary\" fill=\"text\" size=\"sm\">\n                <Trans i18nKey=\"alerting.alert-labels.common-labels-count\" count={commonLabelsCount}>\n                  +{'{{count}}'} common labels\n                </Trans>\n              </Button>\n            </Toggletip>\n          )}\n        </div>\n      )}\n      {showCommonLabels && hasCommonLabels && (\n        <div role=\"listitem\">\n          <Button\n            variant=\"secondary\"\n            fill=\"text\"\n            onClick={() => setShowCommonLabels(false)}\n            tooltipPlacement=\"top\"\n            size=\"sm\"\n          >\n            <Trans i18nKey=\"alert-labels.button.hide\">Hide common labels</Trans>\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2, size?: LabelSize) => {\n  return {\n    wrapper: css({\n      display: 'flex',\n      flexWrap: 'wrap',\n      alignItems: 'center',\n\n      gap: size === 'md' ? theme.spacing() : theme.spacing(0.5),\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}