@zendesk/retrace
Version:
define and capture Product Operation Traces along with computed metrics with an optional friendly React beacon API
133 lines (132 loc) • 6.62 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const react_chrome_1 = require("@zendeskgarden/react-chrome");
const react_theming_1 = require("@zendeskgarden/react-theming");
const constants_1 = require("../constants");
const PANEL_WIDTH_ADJ = 20;
const DetailsContainer = styled_components_1.default.div `
width: ${constants_1.DETAILS_PANEL_WIDTH - PANEL_WIDTH_ADJ}px;
flex-shrink: 0;
position: sticky;
top: 0;
max-height: 80vh;
background-color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'background.default' })};
`;
const StyledSheet = (0, styled_components_1.default)(react_chrome_1.Sheet) `
height: 100%;
border-radius: ${(props) => props.theme.borderRadii.md} 0 0
${(props) => props.theme.borderRadii.md};
box-shadow: ${(props) => props.theme.shadows.lg('-2px', '8px', (0, react_theming_1.getColor)({ theme: props.theme, variable: 'shadow.large' }))};
`;
const StyledSheetTitle = (0, styled_components_1.default)(react_chrome_1.Sheet.Title) `
overflow-wrap: break-word;
`;
const DetailRow = styled_components_1.default.div `
margin-bottom: ${(props) => props.theme.space.xs};
border-radius: ${(props) => props.theme.borderRadii.sm};
background-color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'background.raised' })};
&:last-child {
margin-bottom: 0;
}
`;
const Label = styled_components_1.default.span `
display: block;
font-weight: ${(props) => props.theme.fontWeights.semibold};
margin-bottom: ${(props) => props.theme.space.xs};
color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'foreground.primary' })};
`;
const Value = styled_components_1.default.span `
color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'foreground.default' })};
font-family: ${(props) => props.theme.fonts.mono};
`;
const JsonValue = styled_components_1.default.pre `
font-family: ${(props) => props.theme.fonts.mono};
font-size: ${(props) => props.theme.fontSizes.sm};
background: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'background.recessed' })};
color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'foreground.default' })};
padding: ${(props) => props.theme.space.sm};
border-radius: ${(props) => props.theme.borderRadii.sm};
border: ${(props) => props.theme.borders.sm};
border-color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'border.default' })};
overflow: auto;
max-height: 240px;
margin-top: ${(props) => props.theme.space.xs};
`;
const SpanDetails = ({ span, onClose }) => {
if (!span)
return null;
return (React.createElement(DetailsContainer, null,
React.createElement(StyledSheet, { isOpen: !!span },
React.createElement(react_chrome_1.Sheet.Header, null,
React.createElement(StyledSheetTitle, null, span.groupName),
React.createElement(react_chrome_1.Sheet.Description, null,
"Type: ",
span.type)),
React.createElement(react_chrome_1.Sheet.Body, null,
React.createElement(DetailRow, null,
React.createElement(Label, null, "ID"),
React.createElement(Value, null,
span.span.parentSpanId ? `${span.span.parentSpanId} => ` : '',
span.span.id)),
React.createElement(DetailRow, null,
React.createElement(Label, null, "Start Time"),
React.createElement(Value, null,
span.annotation.operationRelativeStartTime.toFixed(2),
"ms")),
React.createElement(DetailRow, null,
React.createElement(Label, null, "Duration"),
React.createElement(Value, null,
span.span.duration.toFixed(2),
"ms")),
React.createElement(DetailRow, null,
React.createElement(Label, null, "Occurrence"),
React.createElement(Value, null, span.annotation.occurrence)),
span.span.performanceEntry && (React.createElement(DetailRow, null,
React.createElement(Label, null, "Performance Entry"),
React.createElement(JsonValue, null, JSON.stringify(span.span.performanceEntry, null, 2)))),
span.span.attributes && (React.createElement(DetailRow, null,
React.createElement(Label, null, "Attributes"),
React.createElement(JsonValue, null, JSON.stringify(span.span.attributes, null, 2))))),
React.createElement(react_chrome_1.Sheet.Close, { "aria-label": "Close", onClick: onClose }))));
};
// eslint-disable-next-line import/no-default-export
exports.default = SpanDetails;
//# sourceMappingURL=SpanDetails.js.map