@zendesk/react-measure-timing-hooks/cjs/v3/visualizer/components/SpanDetails.js

react hooks for measuring time to interactive and time to render of components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable import/no-extraneous-dependencies */
const react_1 = __importDefault(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_1.default.createElement(DetailsContainer, null,
        react_1.default.createElement(StyledSheet, { isOpen: !!span },
            react_1.default.createElement(react_chrome_1.Sheet.Header, null,
                react_1.default.createElement(StyledSheetTitle, null, span.groupName),
                react_1.default.createElement(react_chrome_1.Sheet.Description, null,
                    "Type: ",
                    span.type)),
            react_1.default.createElement(react_chrome_1.Sheet.Body, null,
                react_1.default.createElement(DetailRow, null,
                    react_1.default.createElement(Label, null, "Start Time"),
                    react_1.default.createElement(Value, null,
                        span.annotation.operationRelativeStartTime.toFixed(2),
                        "ms")),
                react_1.default.createElement(DetailRow, null,
                    react_1.default.createElement(Label, null, "Duration"),
                    react_1.default.createElement(Value, null,
                        span.span.duration.toFixed(2),
                        "ms")),
                react_1.default.createElement(DetailRow, null,
                    react_1.default.createElement(Label, null, "Occurrence"),
                    react_1.default.createElement(Value, null, span.annotation.occurrence)),
                span.span.performanceEntry && (react_1.default.createElement(DetailRow, null,
                    react_1.default.createElement(Label, null, "Performance Entry"),
                    react_1.default.createElement(JsonValue, null, JSON.stringify(span.span.performanceEntry, null, 2)))),
                span.span.attributes && (react_1.default.createElement(DetailRow, null,
                    react_1.default.createElement(Label, null, "Attributes"),
                    react_1.default.createElement(JsonValue, null, JSON.stringify(span.span.attributes, null, 2))))),
            react_1.default.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