@grafana/ui/dist/cjs/components/VizTooltip/VizTooltipFooter.cjs.map

Grafana Components Library

{"version":3,"file":"VizTooltipFooter.cjs","sources":["../../../../src/components/VizTooltip/VizTooltipFooter.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useMemo } from 'react';\n\nimport {\n  type ActionModel,\n  type Field,\n  type GrafanaTheme2,\n  type LinkModel,\n  type ThemeSpacingTokens,\n} from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { Trans } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { ActionButton } from '../Actions/ActionButton';\nimport { Button } from '../Button/Button';\nimport { DataLinkButton } from '../DataLinks/DataLinkButton';\nimport { Icon } from '../Icon/Icon';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { type ResponsiveProp } from '../Layout/utils/responsiveness';\nimport { type AdHocFilterItem } from '../Table/TableNG/types';\n\n/** @alpha */\nexport interface AdHocFilterModel extends AdHocFilterItem {\n  onClick: () => void;\n}\n\n/** @alpha */\nexport interface FilterByGroupedLabelsModel {\n  onFilterForGroupedLabels?: () => void;\n  onFilterOutGroupedLabels?: () => void;\n}\n\n/** @alpha */\nexport interface VizTooltipFooterProps {\n  /** Data links to render as clickable buttons. Defaults to an empty array. */\n  dataLinks?: Array<LinkModel<Field>>;\n  /** Actions to render as clickable buttons. */\n  actions?: Array<ActionModel<Field>>;\n  /** Ad hoc filter buttons, typically used to filter dashboards by a label/value pair. */\n  adHocFilters?: AdHocFilterModel[];\n  /** Controls rendering of grouped label filter buttons (filter for / filter out). */\n  filterByGroupedLabels?: FilterByGroupedLabelsModel;\n  /** Callback to open the annotation editor for the hovered point. */\n  annotate?: () => void;\n}\n\nconst ADD_ANNOTATION_ID = 'add-annotation-button';\n\ntype RenderOneClickTrans = (title: string) => React.ReactNode;\ntype RenderItem<T extends LinkModel | ActionModel> = (\n  item: T,\n  idx: number,\n  styles: ReturnType<typeof getStyles>\n) => React.ReactNode;\n\nfunction makeRenderLinksOrActions<T extends LinkModel | ActionModel>(\n  renderOneClickTrans: RenderOneClickTrans,\n  renderItem: RenderItem<T>,\n  itemGap?: ResponsiveProp<ThemeSpacingTokens>\n) {\n  const renderLinksOrActions = (items: T[], styles: ReturnType<typeof getStyles>) => {\n    if (items.length === 0) {\n      return;\n    }\n\n    const oneClickItem = items.find((item) => item.oneClick === true);\n\n    if (oneClickItem != null) {\n      return (\n        <div className={styles.footerSection}>\n          <Stack direction=\"column\" justifyContent=\"flex-start\" gap={0.5}>\n            <span className={styles.oneClickWrapper}>\n              <Icon name=\"info-circle\" size=\"lg\" className={styles.infoIcon} />\n              {renderOneClickTrans(oneClickItem.title)}\n            </span>\n          </Stack>\n        </div>\n      );\n    }\n\n    return (\n      <div className={styles.footerSection}>\n        <Stack direction=\"column\" justifyContent=\"flex-start\" gap={itemGap}>\n          {items.map((item, i) => renderItem(item, i, styles))}\n        </Stack>\n      </div>\n    );\n  };\n\n  return renderLinksOrActions;\n}\n\nconst renderDataLinks = makeRenderLinksOrActions<LinkModel>(\n  (title) => (\n    <Trans i18nKey=\"grafana-ui.viz-tooltip.footer-click-to-navigate\">Click to open {{ linkTitle: title }}</Trans>\n  ),\n  (item, i, styles) => (\n    <DataLinkButton link={item} key={i} buttonProps={{ className: styles.dataLinkButton, fill: 'text' }} />\n  ),\n  0.5\n);\n\nconst renderActions = makeRenderLinksOrActions<ActionModel>(\n  (title) => <Trans i18nKey=\"grafana-ui.viz-tooltip.footer-click-to-action\">Click to {{ actionTitle: title }}</Trans>,\n  (item, i) => <ActionButton key={i} action={item} variant=\"secondary\" />\n);\n\n/** @alpha */\nexport const VizTooltipFooter = ({\n  dataLinks = [],\n  actions = [],\n  annotate,\n  adHocFilters = [],\n  filterByGroupedLabels,\n}: VizTooltipFooterProps) => {\n  const styles = useStyles2(getStyles);\n  const hasOneClickLink = useMemo(() => dataLinks.some((link) => link.oneClick === true), [dataLinks]);\n  const hasOneClickAction = useMemo(() => actions.some((action) => action.oneClick === true), [actions]);\n\n  return (\n    <div className={styles.wrapper}>\n      {!hasOneClickAction && renderDataLinks(dataLinks, styles)}\n      {!hasOneClickLink && renderActions(actions, styles)}\n      {!hasOneClickLink && !hasOneClickAction && adHocFilters.length > 0 && (\n        <div className={styles.footerSection}>\n          {adHocFilters.map((item, index) => (\n            <Button key={index} icon=\"filter\" variant=\"secondary\" size=\"sm\" onClick={item.onClick}>\n              <Trans i18nKey=\"grafana-ui.viz-tooltip.footer-filter-for-value\">\n                Filter for '{{ value: item.value }}'\n              </Trans>\n            </Button>\n          ))}\n        </div>\n      )}\n\n      {!hasOneClickLink && !hasOneClickAction && filterByGroupedLabels && (\n        <div className={styles.footerSection}>\n          <Stack direction=\"column\" gap={0.5} width=\"fit-content\">\n            <Button\n              icon=\"filter\"\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={filterByGroupedLabels.onFilterForGroupedLabels}\n              data-testid={selectors.components.VizTooltipFooter.buttons.apply}\n            >\n              <Trans i18nKey=\"grafana-ui.viz-tooltip.footer-apply-series-as-filter\">Filter on this value</Trans>\n            </Button>\n            <Button\n              icon=\"filter\"\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={filterByGroupedLabels.onFilterOutGroupedLabels}\n              data-testid={selectors.components.VizTooltipFooter.buttons.applyInverse}\n            >\n              <Trans i18nKey=\"grafana-ui.viz-tooltip.footer-apply-series-as-inverse-filter\">\n                Filter out this value\n              </Trans>\n            </Button>\n          </Stack>\n        </div>\n      )}\n      {!hasOneClickLink && !hasOneClickAction && annotate != null && (\n        <div className={styles.footerSection}>\n          <Button icon=\"comment-alt\" variant=\"secondary\" size=\"sm\" id={ADD_ANNOTATION_ID} onClick={annotate}>\n            <Trans i18nKey=\"grafana-ui.viz-tooltip.footer-add-annotation\">Add annotation</Trans>\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  wrapper: css({\n    display: 'flex',\n    flexDirection: 'column',\n    flex: 1,\n    padding: theme.spacing(0),\n  }),\n  footerSection: css({\n    borderTop: `1px solid ${theme.colors.border.medium}`,\n    padding: theme.spacing(1),\n  }),\n  dataLinkButton: css({\n    cursor: 'pointer',\n    '&:hover': {\n      textDecoration: 'underline',\n      background: 'none',\n    },\n    padding: 0,\n    height: 'auto',\n    '& span': {\n      whiteSpace: 'normal',\n      textAlign: 'left',\n    },\n  }),\n  oneClickWrapper: css({\n    display: 'flex',\n    alignItems: 'center',\n  }),\n  infoIcon: css({\n    color: theme.colors.primary.main,\n    paddingRight: theme.spacing(0.5),\n  }),\n});\n"],"names":["Stack","jsx","Icon","jsxs","Trans","DataLinkButton","ActionButton","useStyles2","useMemo","Button","selectors","css"],"mappings":"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"}