@grafana/alerting/dist/cjs/grafana/rules/components/state/StateIcon.cjs.map

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

{"version":3,"file":"StateIcon.cjs","sources":["../../../../../../src/grafana/rules/components/state/StateIcon.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/css';\nimport { upperFirst } from 'lodash';\nimport { type ComponentProps, memo } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Icon, type IconName, Text, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';\n\nimport type { Health, State, Type } from './types';\n\ntype TextProps = ComponentProps<typeof Text>;\n\ninterface CommonStateIconsProps {\n  type?: Type;\n  health?: Health;\n  isPaused?: boolean;\n  operation?: RuleOperation;\n}\n\ninterface AlertingStateIconProps extends CommonStateIconsProps {\n  type?: 'alerting';\n  state?: State;\n}\n\ninterface RecordingStateIconProps extends CommonStateIconsProps {\n  type: 'recording';\n  state?: never;\n}\n\ntype StateIconProps = AlertingStateIconProps | RecordingStateIconProps;\n\ntype RuleOperation = 'creating' | 'deleting';\n\nconst icons: Record<State, IconName> = {\n  normal: 'check-circle',\n  pending: 'circle',\n  recovering: 'exclamation-circle',\n  firing: 'exclamation-circle',\n  unknown: 'question-circle',\n  inhibited: 'minus-circle',\n};\n\nconst color: Record<State, TextProps['color']> = {\n  normal: 'success',\n  pending: 'warning',\n  recovering: 'warning',\n  firing: 'error',\n  unknown: 'secondary',\n  inhibited: 'info',\n};\n\nconst stateNames: Record<State, string> = {\n  normal: 'Normal',\n  pending: 'Pending',\n  firing: 'Firing',\n  recovering: 'Recovering',\n  unknown: 'Unknown',\n  inhibited: 'Inhibited',\n};\n\nconst operationIcons: Record<RuleOperation, IconName> = {\n  creating: 'plus-circle',\n  deleting: 'minus-circle',\n};\n\n// ⚠️ not trivial to update this, you have to re-do the math for the loading spinner\nconst ICON_SIZE = 15;\n\n/**\n * Make sure that the order of importance here matches the one we use in the StateBadge component for the detail view\n * This component is often rendered tens or hundreds of times in a single page, so it's performance is important\n *\n * @TODO support translations\n */\nexport const StateIcon = memo(function StateIcon({\n  state,\n  health,\n  type = 'alerting',\n  isPaused = false,\n  operation,\n}: StateIconProps) {\n  const styles = useStyles2(getStyles);\n  const theme = useTheme2();\n\n  let iconName: IconName = state ? icons[state] : 'circle';\n  let iconColor: TextProps['color'] = state ? color[state] : 'secondary';\n  let stateName: string = state ? stateNames[state] : 'unknown';\n\n  if (type === 'recording') {\n    iconName = 'square-shape';\n    iconColor = 'success';\n    stateName = 'Recording';\n  }\n\n  if (health === 'nodata') {\n    iconName = 'exclamation-triangle';\n    iconColor = 'warning';\n    stateName = 'Insufficient data';\n  }\n\n  if (health === 'error') {\n    iconName = 'times-circle';\n    iconColor = 'error';\n    stateName = 'Failed to evaluate rule';\n  }\n\n  if (isPaused) {\n    iconName = 'pause-circle';\n    iconColor = 'warning';\n    stateName = 'Paused';\n  }\n\n  if (operation) {\n    iconName = operationIcons[operation];\n    iconColor = 'secondary';\n    stateName = upperFirst(operation);\n  }\n\n  return (\n    <Tooltip content={stateName} placement=\"right\">\n      <div>\n        <Text color={iconColor}>\n          <div className={styles.iconsContainer}>\n            <Icon name={iconName} width={ICON_SIZE} height={ICON_SIZE} aria-label={stateName} />\n            {/* this loading spinner works by using an optical illusion;\n              the actual icon is static and the \"spinning\" part is just a semi-transparent darker circle overlayed on top.\n              This makes it look like there is a small bright colored spinner rotating.\n            */}\n            {operation && (\n              <svg\n                width={ICON_SIZE}\n                height={ICON_SIZE}\n                viewBox=\"0 0 20 20\"\n                version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className={styles.spinning}\n              >\n                <circle\n                  r={ICON_SIZE / 2}\n                  cx=\"10\"\n                  cy=\"10\"\n                  // make sure to match this color to the color of the list item background where it's being used! Works for both light and dark themes.\n                  stroke={theme.colors.background.primary}\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  fill=\"transparent\"\n                  strokeOpacity={0.85}\n                  strokeDasharray=\"20px\"\n                />\n              </svg>\n            )}\n          </div>\n        </Text>\n      </div>\n    </Tooltip>\n  );\n});\n\nconst spin = keyframes({\n  '0%': {\n    transform: 'rotate(0deg)',\n  },\n  '50%': {\n    transform: 'rotate(180deg)',\n  },\n  '100%': {\n    transform: 'rotate(360deg)',\n  },\n});\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  iconsContainer: css({\n    position: 'relative',\n    width: ICON_SIZE,\n    height: ICON_SIZE,\n    '> *': {\n      position: 'absolute',\n    },\n  }),\n  spinning: css({\n    [theme.transitions.handleMotion('no-preference')]: {\n      animationName: spin,\n      animationIterationCount: 'infinite',\n      animationDuration: '1s',\n      animationTimingFunction: 'linear',\n    },\n  }),\n});\n"],"names":["memo","StateIcon","useStyles2","useTheme2","upperFirst","Tooltip","jsx","Text","jsxs","Icon","keyframes","css"],"mappings":"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"}