@grafana/flamegraph
Version:
Grafana flamegraph visualization component
123 lines (119 loc) • 4.48 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var react = require('react');
var data = require('@grafana/data');
var ui = require('@grafana/ui');
"use strict";
const FlameGraphMetadata = react.memo(
({ data: data$1, focusedItem, totalTicks, sandwichedLabel, onFocusPillClick, onSandwichPillClick }) => {
const styles = ui.useStyles2(getStyles);
const parts = [];
const ticksVal = data.getValueFormat("short")(totalTicks);
const displayValue = data$1.valueDisplayProcessor(totalTicks);
let unitValue = displayValue.text + displayValue.suffix;
const unitTitle = data$1.getUnitTitle();
if (unitTitle === "Count") {
if (!displayValue.suffix) {
unitValue = displayValue.text;
}
}
parts.push(
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.metadataPill, children: [
unitValue,
" | ",
ticksVal.text,
ticksVal.suffix,
" samples (",
unitTitle,
")"
] }, "default")
);
if (sandwichedLabel) {
parts.push(
/* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: sandwichedLabel, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "angle-right" }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.metadataPill, children: [
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "gf-show-context" }),
" ",
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.metadataPillName, children: sandwichedLabel.substring(sandwichedLabel.lastIndexOf("/") + 1) }),
/* @__PURE__ */ jsxRuntime.jsx(
ui.IconButton,
{
className: styles.pillCloseButton,
name: "times",
size: "sm",
onClick: onSandwichPillClick,
tooltip: "Remove sandwich view",
"aria-label": "Remove sandwich view"
}
)
] })
] }) }, "sandwich")
);
}
if (focusedItem) {
const percentValue = totalTicks > 0 ? Math.round(1e4 * (focusedItem.item.value / totalTicks)) / 100 : 0;
const iconName = percentValue > 0 ? "eye" : "exclamation-circle";
parts.push(
/* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: focusedItem.label, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "angle-right" }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.metadataPill, children: [
/* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: iconName }),
"\xA0",
percentValue,
"% of total",
/* @__PURE__ */ jsxRuntime.jsx(
ui.IconButton,
{
className: styles.pillCloseButton,
name: "times",
size: "sm",
onClick: onFocusPillClick,
tooltip: "Remove focus",
"aria-label": "Remove focus"
}
)
] })
] }) }, "focus")
);
}
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.metadata, children: parts });
}
);
FlameGraphMetadata.displayName = "FlameGraphMetadata";
const getStyles = (theme) => ({
metadataPill: css.css({
label: "metadataPill",
display: "inline-flex",
alignItems: "center",
background: theme.colors.background.secondary,
borderRadius: theme.shape.borderRadius(8),
padding: theme.spacing(0.5, 1),
fontSize: theme.typography.bodySmall.fontSize,
fontWeight: theme.typography.fontWeightMedium,
lineHeight: theme.typography.bodySmall.lineHeight,
color: theme.colors.text.secondary
}),
pillCloseButton: css.css({
label: "pillCloseButton",
verticalAlign: "text-bottom",
margin: theme.spacing(0, 0.5)
}),
metadata: css.css({
display: "flex",
alignItems: "center",
justifyContent: "center",
margin: "8px 0"
}),
metadataPillName: css.css({
label: "metadataPillName",
maxWidth: "200px",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
marginLeft: theme.spacing(0.5)
})
});
module.exports = FlameGraphMetadata;
//# sourceMappingURL=FlameGraphMetadata.cjs.map