@grafana/ui
Version:
Grafana Components Library
212 lines (205 loc) • 7.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var clsx = require('clsx');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var InlineToast = require('../InlineToast/InlineToast.cjs');
var Tooltip = require('../Tooltip/Tooltip.cjs');
var VizTooltipColorIndicator = require('./VizTooltipColorIndicator.cjs');
var types = require('./types.cjs');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var clsx__default = /*#__PURE__*/_interopDefaultCompat(clsx);
"use strict";
var LabelValueTypes = /* @__PURE__ */ ((LabelValueTypes2) => {
LabelValueTypes2["label"] = "label";
LabelValueTypes2["value"] = "value";
return LabelValueTypes2;
})(LabelValueTypes || {});
const SUCCESSFULLY_COPIED_TEXT = "Copied to clipboard";
const SHOW_SUCCESS_DURATION = 2 * 1e3;
const HORIZONTAL_PX_PER_CHAR = 7;
const CAN_COPY = Boolean(navigator.clipboard && window.isSecureContext);
const VizTooltipRow = ({
label,
value,
color,
colorIndicator,
colorPlacement = types.VizTooltipColorPlacement.first,
justify,
isActive = false,
marginRight,
isPinned = false,
lineStyle,
showValueScroll,
isHiddenFromViz
}) => {
const styles = ThemeContext.useStyles2(getStyles, justify, marginRight);
const innerValueScrollStyle = showValueScroll ? {
maxHeight: 55,
whiteSpace: "wrap",
wordBreak: "break-word",
overflowY: "auto"
} : {
whiteSpace: "pre-line",
wordBreak: "break-word",
lineHeight: 1.2
};
const [showLabelTooltip, setShowLabelTooltip] = React.useState(false);
const [copiedText, setCopiedText] = React.useState(null);
const [showCopySuccess, setShowCopySuccess] = React.useState(false);
const labelRef = React.useRef(null);
const valueRef = React.useRef(null);
React.useEffect(() => {
let timeoutId;
if (showCopySuccess) {
timeoutId = setTimeout(() => {
setShowCopySuccess(false);
}, SHOW_SUCCESS_DURATION);
}
return () => {
window.clearTimeout(timeoutId);
};
}, [showCopySuccess]);
const copyToClipboard = async (text, type) => {
if (!CAN_COPY) {
fallbackCopyToClipboard(text, type);
return;
}
try {
await navigator.clipboard.writeText(text);
setCopiedText({ [`${type}`]: text });
setShowCopySuccess(true);
} catch (error) {
setCopiedText(null);
}
};
const fallbackCopyToClipboard = (text, type) => {
var _a;
const textarea = document.createElement("textarea");
(_a = labelRef.current) == null ? void 0 : _a.appendChild(textarea);
textarea.value = text;
textarea.focus();
textarea.select();
try {
const successful = document.execCommand("copy");
if (successful) {
setCopiedText({ [`${type}`]: text });
setShowCopySuccess(true);
}
} catch (err) {
console.error("Unable to copy to clipboard", err);
}
textarea.remove();
};
const onMouseEnterLabel = (event) => {
if (event.currentTarget.offsetWidth < event.currentTarget.scrollWidth) {
setShowLabelTooltip(true);
}
};
const onMouseLeaveLabel = () => setShowLabelTooltip(false);
if (label.length * HORIZONTAL_PX_PER_CHAR > window.innerWidth / 2) {
label = label.replaceAll("{", "{\n ").replaceAll("}", "\n}").replaceAll(", ", ",\n ");
}
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.contentWrapper, children: [
color && colorPlacement === types.VizTooltipColorPlacement.first && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.colorWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
VizTooltipColorIndicator.VizTooltipColorIndicator,
{
color,
colorIndicator,
lineStyle,
isHollow: isHiddenFromViz
}
) }),
label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.labelWrapper, children: !isPinned ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default(styles.label, isActive ? styles.activeSeries : ""), children: label }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: label, interactive: false, show: showLabelTooltip, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
showCopySuccess && (copiedText == null ? void 0 : copiedText.label) && /* @__PURE__ */ jsxRuntime.jsx(InlineToast.InlineToast, { placement: "top", referenceElement: labelRef.current, children: SUCCESSFULLY_COPIED_TEXT }),
/* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: clsx__default.default(styles.label, isActive ? styles.activeSeries : "", CAN_COPY ? styles.copy : ""),
onMouseEnter: onMouseEnterLabel,
onMouseLeave: onMouseLeaveLabel,
onClick: () => copyToClipboard(label, "label" /* label */),
ref: labelRef,
children: label
}
)
] }) }) }) }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.valueWrapper, children: [
color && colorPlacement === types.VizTooltipColorPlacement.leading && /* @__PURE__ */ jsxRuntime.jsx(
VizTooltipColorIndicator.VizTooltipColorIndicator,
{
color,
colorIndicator,
position: VizTooltipColorIndicator.ColorIndicatorPosition.Leading,
lineStyle
}
),
!isPinned ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.value, style: innerValueScrollStyle, children: value }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
showCopySuccess && (copiedText == null ? void 0 : copiedText.value) && /* @__PURE__ */ jsxRuntime.jsx(InlineToast.InlineToast, { placement: "top", referenceElement: valueRef.current, children: SUCCESSFULLY_COPIED_TEXT }),
/* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: clsx__default.default(styles.value, CAN_COPY ? styles.copy : ""),
style: innerValueScrollStyle,
onClick: () => copyToClipboard(value ? value.toString() : "", "value" /* value */),
ref: valueRef,
children: value
}
)
] }),
color && colorPlacement === types.VizTooltipColorPlacement.trailing && /* @__PURE__ */ jsxRuntime.jsx(
VizTooltipColorIndicator.VizTooltipColorIndicator,
{
color,
colorIndicator,
position: VizTooltipColorIndicator.ColorIndicatorPosition.Trailing,
lineStyle
}
)
] })
] });
};
const getStyles = (theme, justify = "start", marginRight) => ({
contentWrapper: css.css({
display: "flex",
maxWidth: "100%",
alignItems: "start",
justifyContent: justify,
columnGap: theme.spacing(0.75)
}),
label: css.css({ display: "inline" }),
value: css.css({
fontWeight: 500,
textOverflow: "ellipsis",
overflow: "hidden"
}),
colorWrapper: css.css({
alignSelf: "center",
flexShrink: 0
}),
labelWrapper: css.css({
flexGrow: 1,
overflow: "hidden",
textOverflow: "ellipsis",
color: theme.colors.text.secondary,
fontWeight: 400
}),
valueWrapper: css.css({
display: "flex",
alignItems: "center",
flexShrink: 0,
alignSelf: "center",
marginRight
}),
activeSeries: css.css({
fontWeight: theme.typography.fontWeightBold,
color: theme.colors.text.maxContrast
}),
copy: css.css({
cursor: "pointer"
})
});
exports.VizTooltipRow = VizTooltipRow;
//# sourceMappingURL=VizTooltipRow.cjs.map