@grafana/alerting/dist/cjs/grafana/rules/components/labels/AlertLabels.cjs

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var lodash = require('lodash');
var react = require('react');
var i18n = require('@grafana/i18n');
var ui = require('@grafana/ui');
var labels = require('../../utils/labels.cjs');
var AlertLabel = require('./AlertLabel.cjs');

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

exports.AlertLabels = AlertLabels;
//# sourceMappingURL=AlertLabels.cjs.map