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