@grafana/alerting/dist/cjs/grafana/rules/components/state/StateIcon.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 ui = require('@grafana/ui');

"use strict";
const icons = {
  normal: "check-circle",
  pending: "circle",
  recovering: "exclamation-circle",
  firing: "exclamation-circle",
  unknown: "question-circle",
  inhibited: "minus-circle"
};
const color = {
  normal: "success",
  pending: "warning",
  recovering: "warning",
  firing: "error",
  unknown: "secondary",
  inhibited: "info"
};
const stateNames = {
  normal: "Normal",
  pending: "Pending",
  firing: "Firing",
  recovering: "Recovering",
  unknown: "Unknown",
  inhibited: "Inhibited"
};
const operationIcons = {
  creating: "plus-circle",
  deleting: "minus-circle"
};
const ICON_SIZE = 15;
const StateIcon = react.memo(function StateIcon2({
  state,
  health,
  type = "alerting",
  isPaused = false,
  operation
}) {
  const styles = ui.useStyles2(getStyles);
  const theme = ui.useTheme2();
  let iconName = state ? icons[state] : "circle";
  let iconColor = state ? color[state] : "secondary";
  let stateName = state ? stateNames[state] : "unknown";
  if (type === "recording") {
    iconName = "square-shape";
    iconColor = "success";
    stateName = "Recording";
  }
  if (health === "nodata") {
    iconName = "exclamation-triangle";
    iconColor = "warning";
    stateName = "Insufficient data";
  }
  if (health === "error") {
    iconName = "times-circle";
    iconColor = "error";
    stateName = "Failed to evaluate rule";
  }
  if (isPaused) {
    iconName = "pause-circle";
    iconColor = "warning";
    stateName = "Paused";
  }
  if (operation) {
    iconName = operationIcons[operation];
    iconColor = "secondary";
    stateName = lodash.upperFirst(operation);
  }
  return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: stateName, placement: "right", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { color: iconColor, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.iconsContainer, children: [
    /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: iconName, width: ICON_SIZE, height: ICON_SIZE, "aria-label": stateName }),
    operation && /* @__PURE__ */ jsxRuntime.jsx(
      "svg",
      {
        width: ICON_SIZE,
        height: ICON_SIZE,
        viewBox: "0 0 20 20",
        version: "1.1",
        xmlns: "http://www.w3.org/2000/svg",
        className: styles.spinning,
        children: /* @__PURE__ */ jsxRuntime.jsx(
          "circle",
          {
            r: ICON_SIZE / 2,
            cx: "10",
            cy: "10",
            stroke: theme.colors.background.primary,
            strokeWidth: "2",
            strokeLinecap: "round",
            fill: "transparent",
            strokeOpacity: 0.85,
            strokeDasharray: "20px"
          }
        )
      }
    )
  ] }) }) }) });
});
const spin = css.keyframes({
  "0%": {
    transform: "rotate(0deg)"
  },
  "50%": {
    transform: "rotate(180deg)"
  },
  "100%": {
    transform: "rotate(360deg)"
  }
});
const getStyles = (theme) => ({
  iconsContainer: css.css({
    position: "relative",
    width: ICON_SIZE,
    height: ICON_SIZE,
    "> *": {
      position: "absolute"
    }
  }),
  spinning: css.css({
    [theme.transitions.handleMotion("no-preference")]: {
      animationName: spin,
      animationIterationCount: "infinite",
      animationDuration: "1s",
      animationTimingFunction: "linear"
    }
  })
});

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