@grafana/alerting/dist/cjs/grafana/rules/components/labels/AlertLabel.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 react = require('react');
var tinycolor2 = require('tinycolor2');
var ui = require('@grafana/ui');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var tinycolor2__default = /*#__PURE__*/_interopDefaultCompat(tinycolor2);

"use strict";
const AlertLabel = (props) => {
  const { labelKey, value, icon, color, colorBy, size = "md", onClick, ...rest } = props;
  const theColor = getColorFromProps({ color, colorBy, labelKey, value });
  const styles = ui.useStyles2(getStyles, theColor, size);
  const ariaLabel = `${labelKey}: ${value}`;
  const keyless = !Boolean(labelKey);
  const innerLabel = react.useMemo(
    () => /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { direction: "row", gap: 0, alignItems: "stretch", children: [
      labelKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.label, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { direction: "row", gap: 0.5, alignItems: "center", children: [
        icon && /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: icon }),
        labelKey && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.labelText, title: labelKey.toString(), children: labelKey != null ? labelKey : "" })
      ] }) }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.value, keyless && styles.valueWithoutKey), title: value == null ? void 0 : value.toString(), children: value != null ? value : "-" })
    ] }),
    [labelKey, styles.label, styles.labelText, styles.value, styles.valueWithoutKey, icon, keyless, value]
  );
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.wrapper, "aria-label": ariaLabel, "data-testid": "label-value", ...rest, children: onClick && (labelKey || value) ? /* @__PURE__ */ jsxRuntime.jsx(
    "button",
    {
      type: "button",
      className: styles.clickable,
      onClick: () => onClick == null ? void 0 : onClick([value != null ? value : "", labelKey != null ? labelKey : ""]),
      children: innerLabel
    },
    `${labelKey != null ? labelKey : ""}${value != null ? value : ""}`
  ) : innerLabel });
};
function getAccessibleTagColor(name) {
  if (!name) {
    return;
  }
  const attempts = Array.from({ length: 6 }, (_, i) => name + "-".repeat(i));
  const readableAttempt = attempts.find((attempt) => {
    const candidate = ui.getTagColorsFromName(attempt).color;
    return tinycolor2__default.default.isReadable(candidate, "#000", { level: "AA", size: "small" }) || tinycolor2__default.default.isReadable(candidate, "#fff", { level: "AA", size: "small" });
  });
  const chosen = readableAttempt != null ? readableAttempt : name;
  return ui.getTagColorsFromName(chosen).color;
}
function getColorFromProps({
  color,
  colorBy,
  labelKey,
  value
}) {
  if (color) {
    return getAccessibleTagColor(color);
  }
  if (colorBy === "key") {
    return getAccessibleTagColor(labelKey);
  }
  if (colorBy === "value") {
    return getAccessibleTagColor(value);
  }
  if (colorBy === "both" && labelKey && value) {
    return getAccessibleTagColor(labelKey + value);
  }
  return;
}
function getReadableFontColor(bg, fallback) {
  if (tinycolor2__default.default.isReadable(bg, "#000", { level: "AA", size: "small" })) {
    return "#000";
  }
  if (tinycolor2__default.default.isReadable(bg, "#fff", { level: "AA", size: "small" })) {
    return "#fff";
  }
  if (tinycolor2__default.default.isReadable(bg, fallback, { level: "AA", size: "small" })) {
    return tinycolor2__default.default(fallback).toHexString();
  }
  return tinycolor2__default.default.mostReadable(bg, ["#000", "#fff", fallback], {
    includeFallbackColors: true
  }).toHexString();
}
const getStyles = (theme, color, size) => {
  const backgroundColor = color != null ? color : theme.colors.secondary.main;
  const borderColor = theme.isDark ? tinycolor2__default.default(backgroundColor).lighten(5).toString() : tinycolor2__default.default(backgroundColor).darken(5).toString();
  const valueBackgroundColor = theme.isDark ? tinycolor2__default.default(backgroundColor).darken(5).toString() : tinycolor2__default.default(backgroundColor).lighten(5).toString();
  const labelFontColor = color ? getReadableFontColor(backgroundColor, theme.colors.text.primary) : theme.colors.text.primary;
  const valueFontColor = color ? getReadableFontColor(valueBackgroundColor, theme.colors.text.primary) : theme.colors.text.primary;
  let padding = theme.spacing(0.33, 1);
  switch (size) {
    case "sm":
      padding = theme.spacing(0.2, 0.6);
      break;
    case "xs":
      padding = theme.spacing(0, 0.5);
      break;
    default:
      break;
  }
  return {
    wrapper: css.css({
      fontSize: theme.typography.bodySmall.fontSize,
      borderRadius: theme.shape.borderRadius(2)
    }),
    labelText: css.css({
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis",
      maxWidth: "300px"
    }),
    label: css.css({
      display: "flex",
      alignItems: "center",
      color: labelFontColor,
      padding,
      background: backgroundColor,
      border: `solid 1px ${borderColor}`,
      borderTopLeftRadius: theme.shape.borderRadius(2),
      borderBottomLeftRadius: theme.shape.borderRadius(2)
    }),
    clickable: css.css({
      border: "none",
      background: "none",
      outline: "none",
      boxShadow: "none",
      padding: 0,
      margin: 0,
      "&:hover": {
        opacity: 0.8,
        cursor: "pointer"
      }
    }),
    value: css.css({
      color: valueFontColor,
      padding,
      background: valueBackgroundColor,
      border: `solid 1px ${borderColor}`,
      borderLeft: "none",
      borderTopRightRadius: theme.shape.borderRadius(2),
      borderBottomRightRadius: theme.shape.borderRadius(2),
      whiteSpace: "pre",
      overflow: "hidden",
      textOverflow: "ellipsis",
      maxWidth: "300px"
    }),
    valueWithoutKey: css.css({
      borderTopLeftRadius: theme.shape.borderRadius(2),
      borderBottomLeftRadius: theme.shape.borderRadius(2),
      borderLeft: `solid 1px ${borderColor}`
    })
  };
};

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