@grafana/ui
Version:
Grafana Components Library
127 lines (124 loc) • 5.67 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { useMemo } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { Trans } from '@grafana/i18n';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { ActionButton } from '../Actions/ActionButton.mjs';
import { Button } from '../Button/Button.mjs';
import { DataLinkButton } from '../DataLinks/DataLinkButton.mjs';
import { Icon } from '../Icon/Icon.mjs';
import { Stack } from '../Layout/Stack/Stack.mjs';
"use strict";
const ADD_ANNOTATION_ID = "add-annotation-button";
function makeRenderLinksOrActions(renderOneClickTrans, renderItem, itemGap) {
const renderLinksOrActions = (items, styles) => {
if (items.length === 0) {
return;
}
const oneClickItem = items.find((item) => item.oneClick === true);
if (oneClickItem != null) {
return /* @__PURE__ */ jsx("div", { className: styles.footerSection, children: /* @__PURE__ */ jsx(Stack, { direction: "column", justifyContent: "flex-start", gap: 0.5, children: /* @__PURE__ */ jsxs("span", { className: styles.oneClickWrapper, children: [
/* @__PURE__ */ jsx(Icon, { name: "info-circle", size: "lg", className: styles.infoIcon }),
renderOneClickTrans(oneClickItem.title)
] }) }) });
}
return /* @__PURE__ */ jsx("div", { className: styles.footerSection, children: /* @__PURE__ */ jsx(Stack, { direction: "column", justifyContent: "flex-start", gap: itemGap, children: items.map((item, i) => renderItem(item, i, styles)) }) });
};
return renderLinksOrActions;
}
const renderDataLinks = makeRenderLinksOrActions(
(title) => /* @__PURE__ */ jsxs(Trans, { i18nKey: "grafana-ui.viz-tooltip.footer-click-to-navigate", children: [
"Click to open ",
{ linkTitle: title }
] }),
(item, i, styles) => /* @__PURE__ */ jsx(DataLinkButton, { link: item, buttonProps: { className: styles.dataLinkButton, fill: "text" } }, i),
0.5
);
const renderActions = makeRenderLinksOrActions(
(title) => /* @__PURE__ */ jsxs(Trans, { i18nKey: "grafana-ui.viz-tooltip.footer-click-to-action", children: [
"Click to ",
{ actionTitle: title }
] }),
(item, i) => /* @__PURE__ */ jsx(ActionButton, { action: item, variant: "secondary" }, i)
);
const VizTooltipFooter = ({
dataLinks = [],
actions = [],
annotate,
adHocFilters = [],
filterByGroupedLabels
}) => {
const styles = useStyles2(getStyles);
const hasOneClickLink = useMemo(() => dataLinks.some((link) => link.oneClick === true), [dataLinks]);
const hasOneClickAction = useMemo(() => actions.some((action) => action.oneClick === true), [actions]);
return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
!hasOneClickAction && renderDataLinks(dataLinks, styles),
!hasOneClickLink && renderActions(actions, styles),
!hasOneClickLink && !hasOneClickAction && adHocFilters.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.footerSection, children: adHocFilters.map((item, index) => /* @__PURE__ */ jsx(Button, { icon: "filter", variant: "secondary", size: "sm", onClick: item.onClick, children: /* @__PURE__ */ jsxs(Trans, { i18nKey: "grafana-ui.viz-tooltip.footer-filter-for-value", children: [
"Filter for '",
{ value: item.value },
"'"
] }) }, index)) }),
!hasOneClickLink && !hasOneClickAction && filterByGroupedLabels && /* @__PURE__ */ jsx("div", { className: styles.footerSection, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 0.5, width: "fit-content", children: [
/* @__PURE__ */ jsx(
Button,
{
icon: "filter",
variant: "secondary",
size: "sm",
onClick: filterByGroupedLabels.onFilterForGroupedLabels,
"data-testid": selectors.components.VizTooltipFooter.buttons.apply,
children: /* @__PURE__ */ jsx(Trans, { i18nKey: "grafana-ui.viz-tooltip.footer-apply-series-as-filter", children: "Filter on this value" })
}
),
/* @__PURE__ */ jsx(
Button,
{
icon: "filter",
variant: "secondary",
size: "sm",
onClick: filterByGroupedLabels.onFilterOutGroupedLabels,
"data-testid": selectors.components.VizTooltipFooter.buttons.applyInverse,
children: /* @__PURE__ */ jsx(Trans, { i18nKey: "grafana-ui.viz-tooltip.footer-apply-series-as-inverse-filter", children: "Filter out this value" })
}
)
] }) }),
!hasOneClickLink && !hasOneClickAction && annotate != null && /* @__PURE__ */ jsx("div", { className: styles.footerSection, children: /* @__PURE__ */ jsx(Button, { icon: "comment-alt", variant: "secondary", size: "sm", id: ADD_ANNOTATION_ID, onClick: annotate, children: /* @__PURE__ */ jsx(Trans, { i18nKey: "grafana-ui.viz-tooltip.footer-add-annotation", children: "Add annotation" }) }) })
] });
};
const getStyles = (theme) => ({
wrapper: css({
display: "flex",
flexDirection: "column",
flex: 1,
padding: theme.spacing(0)
}),
footerSection: css({
borderTop: `1px solid ${theme.colors.border.medium}`,
padding: theme.spacing(1)
}),
dataLinkButton: css({
cursor: "pointer",
"&:hover": {
textDecoration: "underline",
background: "none"
},
padding: 0,
height: "auto",
"& span": {
whiteSpace: "normal",
textAlign: "left"
}
}),
oneClickWrapper: css({
display: "flex",
alignItems: "center"
}),
infoIcon: css({
color: theme.colors.primary.main,
paddingRight: theme.spacing(0.5)
})
});
export { VizTooltipFooter };
//# sourceMappingURL=VizTooltipFooter.mjs.map