@zendesk/react-measure-timing-hooks
Version:
react hooks for measuring time to interactive and time to render of components
173 lines • 9.07 kB
JavaScript
"use strict";
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;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.App = void 0;
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-magic-numbers */
const react_1 = __importStar(require("react"));
const react_buttons_1 = require("@zendeskgarden/react-buttons");
const react_chrome_1 = require("@zendeskgarden/react-chrome");
const react_theming_1 = require("@zendeskgarden/react-theming");
const grid_2x2_stroke_svg_1 = require("@zendeskgarden/svg-icons/src/16/grid-2x2-stroke.svg");
const user_solo_stroke_svg_1 = require("@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg");
const arrow_right_left_svg_1 = require("@zendeskgarden/svg-icons/src/26/arrow-right-left.svg");
const garden_svg_1 = require("@zendeskgarden/svg-icons/src/26/garden.svg");
const home_fill_svg_1 = require("@zendeskgarden/svg-icons/src/26/home-fill.svg");
const zendesk_svg_1 = require("@zendeskgarden/svg-icons/src/26/zendesk.svg");
// CYN: NEED UPDATE
const mockTickets_1 = require("./mockTickets");
const TicketList_1 = require("./TicketList");
const TicketView_1 = require("./TicketView");
const traceManager_1 = require("./traceManager");
const ticketOperationTracer = traceManager_1.traceManager.createTracer({
name: `ticket-activation`,
type: 'operation',
requiredSpans: [
{
name: 'TicketView',
matchingRelations: ['ticketId'],
type: 'component-render',
isIdle: true,
},
],
relationSchemaName: 'ticket',
variants: {
click: { timeout: 45_000 },
},
// debounceWindow: 1_000,
debounceOnSpans: [
{
name: 'TicketView',
matchingRelations: ['ticketId'],
},
],
interruptOnSpans: [
{
name: 'TicketView',
matchingRelations: ['ticketId'],
type: 'component-unmount',
},
],
captureInteractive: true,
});
// simulate an event every 2 seconds
const simulateEventPeriodically = (ticketId) => {
const interval = setInterval(() => {
performance.mark(`ticket-${ticketId}-event`);
}, 4_000);
return () => void clearInterval(interval);
};
const App = () => {
const [selectedTicketId, setSelectedTicketId] = (0, react_1.useState)(null);
const [selectedTicketIds, setSelectedTicketIds] = (0, react_1.useState)([]);
(0, react_1.useEffect)(() => simulateEventPeriodically(selectedTicketId), [selectedTicketId]);
const handleTicketClick = (id) => {
// traceManager.startOperation({
// operationName: `ticket-activation`,
// track: [
// {
// match: { type: 'component-unmount', attributes: { ticketId: id } },
// interruptWhenSeen: true,
// },
// {
// match: { attributes: { ticketId: id } },
// debounceEndWhenSeen: { debounceBy: 1_000 },
// },
// {
// match: { attributes: { ticketId: id, visibleState: 'complete' } },
// requiredToEnd: true,
// },
// ],
// onTracked,
// onEnd: onTracked,
// waitUntilInteractive: true,
// interruptSelf: true,
// })
ticketOperationTracer.start({
relatedTo: { ticketId: id },
variant: 'click',
});
setSelectedTicketId(id);
};
const handleBack = () => {
setSelectedTicketId(null);
};
return (react_1.default.createElement(react_theming_1.ThemeProvider, null,
react_1.default.createElement(react_chrome_1.Chrome, { isFluid: true },
react_1.default.createElement(react_chrome_1.Nav, { "aria-label": "chrome default example" },
react_1.default.createElement(react_chrome_1.Nav.Item, { hasLogo: true },
react_1.default.createElement(react_chrome_1.Nav.ItemIcon, null,
react_1.default.createElement(garden_svg_1.ReactComponent, { style: { color: react_theming_1.PALETTE.green[400] } })),
react_1.default.createElement(react_chrome_1.Nav.ItemText, null, "Zendesk Garden")),
react_1.default.createElement(react_chrome_1.Nav.Item, { isCurrent: !selectedTicketId, onClick: () => void handleBack(), title: "Ticket List" },
react_1.default.createElement(react_chrome_1.Nav.ItemIcon, null,
react_1.default.createElement(home_fill_svg_1.ReactComponent, null)),
react_1.default.createElement(react_chrome_1.Nav.ItemText, null, "Ticket List")),
react_1.default.createElement(react_chrome_1.Nav.Item, { onClick: () => {
setSelectedTicketIds([]);
setSelectedTicketId(null);
}, title: "Reset Cache" },
react_1.default.createElement(react_chrome_1.Nav.ItemIcon, null,
react_1.default.createElement(arrow_right_left_svg_1.ReactComponent, null)),
react_1.default.createElement(react_chrome_1.Nav.ItemText, null, "Reset")),
react_1.default.createElement(react_chrome_1.Nav.Item, { hasBrandmark: true, title: "Zendesk" },
react_1.default.createElement(react_chrome_1.Nav.ItemIcon, null,
react_1.default.createElement(zendesk_svg_1.ReactComponent, null)),
react_1.default.createElement(react_chrome_1.Nav.ItemText, null, "Zendesk"))),
react_1.default.createElement(react_chrome_1.Body, null,
react_1.default.createElement(react_chrome_1.Header, null,
react_1.default.createElement(react_chrome_1.Header.Item, null,
react_1.default.createElement(react_chrome_1.Header.ItemIcon, null,
react_1.default.createElement(grid_2x2_stroke_svg_1.ReactComponent, null)),
react_1.default.createElement(react_chrome_1.Header.ItemText, { isClipped: true }, "Products")),
react_1.default.createElement(react_chrome_1.Header.Item, { isRound: true },
react_1.default.createElement(react_chrome_1.Header.ItemIcon, null,
react_1.default.createElement(user_solo_stroke_svg_1.ReactComponent, null)),
react_1.default.createElement(react_chrome_1.Header.ItemText, { isClipped: true }, "User"))),
react_1.default.createElement(react_chrome_1.Content, null,
react_1.default.createElement(react_chrome_1.Main, { style: { padding: 28 } }, selectedTicketId === null ? (react_1.default.createElement(TicketList_1.TicketList, { tickets: mockTickets_1.mockTickets, onTicketClick: handleTicketClick })) : (react_1.default.createElement(TicketView_1.TicketView, { ticketId: selectedTicketId, cached: selectedTicketIds.includes(selectedTicketId), onLoaded: () => {
setSelectedTicketIds([
...selectedTicketIds,
selectedTicketId,
]);
} })))),
react_1.default.createElement(react_chrome_1.Footer, null,
react_1.default.createElement(react_chrome_1.Footer.Item, null,
react_1.default.createElement(react_buttons_1.Button, { isBasic: true }, "Cancel")),
react_1.default.createElement(react_chrome_1.Footer.Item, null,
react_1.default.createElement(react_buttons_1.Button, { isPrimary: true }, "Save")))))));
};
exports.App = App;
//# sourceMappingURL=App.js.map