@grafana/alerting/dist/esm/grafana/rules/components/labels/AlertLabels.mjs

Grafana Alerting Library – Build vertical integrations on top of the industry-leading alerting solution

import { jsx, jsxs } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { chain } from 'lodash';
import { useState, useMemo } from 'react';
import { t, Trans } from '@grafana/i18n';
import { useStyles2, Stack, Button, Toggletip } from '@grafana/ui';
import { findCommonLabels, isPrivateLabel } from '../../utils/labels.mjs';
import { AlertLabel } from './AlertLabel.mjs';

"use strict";
const AlertLabels = ({
  labels,
  displayCommonLabels,
  labelSets,
  size,
  onClick,
  commonLabelsMode = "expand"
}) => {
  const styles = useStyles2(getStyles, size);
  const [showCommonLabels, setShowCommonLabels] = useState(false);
  const computedCommonLabels = useMemo(
    () => displayCommonLabels && Array.isArray(labelSets) && labelSets.length > 1 ? findCommonLabels(labelSets) : {},
    [displayCommonLabels, labelSets]
  );
  const labelsToShow = chain(labels).toPairs().reject(isPrivateLabel).reject(([key]) => showCommonLabels ? false : key in computedCommonLabels).value();
  const commonLabelsCount = Object.keys(computedCommonLabels).length;
  const hasCommonLabels = commonLabelsCount > 0;
  const tooltip = t("alert-labels.button.show.tooltip", "Show common labels");
  const commonLabelsTooltip = useMemo(
    () => /* @__PURE__ */ jsx(Stack, { "data-testid": "common-labels-tooltip-content", role: "list", direction: "row", wrap: "wrap", gap: 1, width: 48, children: Object.entries(computedCommonLabels).map(([label, value]) => /* @__PURE__ */ jsx(AlertLabel, { size, labelKey: label, value, colorBy: "key", role: "listitem" }, label + value)) }),
    [computedCommonLabels, size]
  );
  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, role: "list", "aria-label": t("alerting.alert-labels.aria-label-labels", "Labels"), children: [
    labelsToShow.map(([label, value]) => {
      return /* @__PURE__ */ jsx(
        AlertLabel,
        {
          size,
          labelKey: label,
          value,
          colorBy: "key",
          onClick,
          role: "listitem"
        },
        label + value
      );
    }),
    !showCommonLabels && hasCommonLabels && /* @__PURE__ */ jsx("div", { role: "listitem", children: commonLabelsMode === "expand" ? /* @__PURE__ */ jsx(
      Button,
      {
        variant: "secondary",
        fill: "text",
        onClick: () => setShowCommonLabels(true),
        tooltip,
        tooltipPlacement: "top",
        size: "sm",
        children: /* @__PURE__ */ jsxs(
          Trans,
          {
            i18nKey: "alerting.alert-labels.common-labels-count",
            count: commonLabelsCount,
            tOptions: {
              defaultValue_one: "+{{count}} common labels",
              defaultValue_other: "+{{count}} common labels"
            },
            children: [
              "+",
              "{{count}}",
              " common labels"
            ]
          }
        )
      }
    ) : /* @__PURE__ */ jsx(Toggletip, { content: commonLabelsTooltip, closeButton: false, fitContent: true, children: /* @__PURE__ */ jsx(Button, { "data-testid": "common-labels-tooltip-trigger", variant: "secondary", fill: "text", size: "sm", children: /* @__PURE__ */ jsxs(
      Trans,
      {
        i18nKey: "alerting.alert-labels.common-labels-count",
        count: commonLabelsCount,
        tOptions: {
          defaultValue_one: "+{{count}} common labels",
          defaultValue_other: "+{{count}} common labels"
        },
        children: [
          "+",
          "{{count}}",
          " common labels"
        ]
      }
    ) }) }) }),
    showCommonLabels && hasCommonLabels && /* @__PURE__ */ jsx("div", { role: "listitem", children: /* @__PURE__ */ jsx(
      Button,
      {
        variant: "secondary",
        fill: "text",
        onClick: () => setShowCommonLabels(false),
        tooltipPlacement: "top",
        size: "sm",
        children: /* @__PURE__ */ jsx(Trans, { i18nKey: "alert-labels.button.hide", children: "Hide common labels" })
      }
    ) })
  ] });
};
const getStyles = (theme, size) => {
  return {
    wrapper: css({
      display: "flex",
      flexWrap: "wrap",
      alignItems: "center",
      gap: size === "md" ? theme.spacing() : theme.spacing(0.5)
    })
  };
};

export { AlertLabels };
//# sourceMappingURL=AlertLabels.mjs.map