@ms-cloudpack/overlay 0.17.124 → 0.17.125
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser-esm/lib/index.js +1 -1
- package/dist/browser-esm/lib/index.js.map +1 -1
- package/lib/components/StatusBadge/StatusBadge.d.ts +2 -1
- package/lib/components/StatusBadge/StatusBadge.d.ts.map +1 -1
- package/lib/components/StatusBadge/StatusBadge.js +10 -10
- package/lib/components/StatusBadge/StatusBadge.js.map +1 -1
- package/lib/components/StatusOverlay/StatusOverlay.js +2 -2
- package/lib/components/StatusOverlay/StatusOverlay.js.map +1 -1
- package/lib/hooks/usePageLoadTimeReporter.d.ts +13 -1
- package/lib/hooks/usePageLoadTimeReporter.d.ts.map +1 -1
- package/lib/hooks/usePageLoadTimeReporter.js +19 -5
- package/lib/hooks/usePageLoadTimeReporter.js.map +1 -1
- package/package.json +4 -4
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { PageLoadTimeReport } from '../../hooks/usePageLoadTimeReporter.js';
|
|
2
3
|
export interface StatusBadgeProps {
|
|
3
4
|
inline?: boolean;
|
|
4
5
|
onExpand?: () => void;
|
|
5
6
|
onToggle?: () => void;
|
|
6
|
-
|
|
7
|
+
pageLoadTimeReport: PageLoadTimeReport;
|
|
7
8
|
}
|
|
8
9
|
export declare const StatusBadge: React.FC<StatusBadgeProps>;
|
|
9
10
|
//# sourceMappingURL=StatusBadge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAM7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAEjF,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0ElD,CAAC"}
|
|
@@ -4,7 +4,7 @@ import styles from './StatusBadge.module.css';
|
|
|
4
4
|
import { default as cx } from 'classnames';
|
|
5
5
|
import { useStatus } from '../CloudpackProvider/useStatus.js';
|
|
6
6
|
import { elementIds } from '../../constants.js';
|
|
7
|
-
export const StatusBadge = ({ inline, onExpand,
|
|
7
|
+
export const StatusBadge = ({ inline, onExpand, pageLoadTimeReport }) => {
|
|
8
8
|
const badgeStatusKey = 'cloudpack.badgeStatus';
|
|
9
9
|
const rootElementRef = useRef(null);
|
|
10
10
|
const dragElementRef = useRef(null);
|
|
@@ -27,13 +27,13 @@ export const StatusBadge = ({ inline, onExpand, pageLoadTime }) => {
|
|
|
27
27
|
if (!shouldRender) {
|
|
28
28
|
return null;
|
|
29
29
|
}
|
|
30
|
-
const metric =
|
|
30
|
+
const metric = pageLoadTimeReport.status == 'success' ? (React.createElement("span", { className: styles.metric, title: "Page Load Time" },
|
|
31
31
|
"in ",
|
|
32
|
-
pageLoadTime.toFixed(2),
|
|
33
|
-
" ms")) : null;
|
|
32
|
+
pageLoadTimeReport.pageLoadTime.toFixed(2),
|
|
33
|
+
" ms")) : pageLoadTimeReport.status === 'error' ? (React.createElement("span", { className: styles.metric, title: "No Page Load Time" }, "No PLT")) : null;
|
|
34
34
|
const leftChevron = '\u00AB';
|
|
35
35
|
const rightChevron = '\u00BB';
|
|
36
|
-
const badge = (React.createElement("div", { id: elementIds.statusBadgeRoot, ref: rootElementRef, className: `${getStatusClassName(status, !!inline)} ${getCollapsedClassName(isCollapsed)}` },
|
|
36
|
+
const badge = (React.createElement("div", { id: elementIds.statusBadgeRoot, ref: rootElementRef, className: `${getStatusClassName(status, !!inline, pageLoadTimeReport.status === 'error')} ${getCollapsedClassName(isCollapsed)}` },
|
|
37
37
|
!inline && (React.createElement("div", { ref: dragElementRef, className: styles.gripArea },
|
|
38
38
|
React.createElement("div", { className: styles.grip }),
|
|
39
39
|
React.createElement("div", { className: styles.grip }))),
|
|
@@ -55,14 +55,14 @@ function getStatusString(status) {
|
|
|
55
55
|
}
|
|
56
56
|
return status.totalErrors === 0 ? 'Success' : 'Errors';
|
|
57
57
|
}
|
|
58
|
-
function getStatusClassName(cpStatus, inline) {
|
|
58
|
+
function getStatusClassName(cpStatus, inline, hasPltError) {
|
|
59
59
|
const { status, totalTasks, totalErrors, totalWarnings } = cpStatus;
|
|
60
60
|
return cx(styles.badge, {
|
|
61
61
|
[styles.inline]: inline,
|
|
62
|
-
[styles.building]: status === 'pending',
|
|
63
|
-
[styles.success]: status === 'idle' && totalTasks > 0 && totalErrors === 0 && totalWarnings === 0,
|
|
64
|
-
[styles.error]: status === 'idle' && totalErrors > 0,
|
|
65
|
-
[styles.warning]: status === 'idle' && totalErrors === 0 && totalWarnings > 0,
|
|
62
|
+
[styles.building]: status === 'pending' && !hasPltError,
|
|
63
|
+
[styles.success]: status === 'idle' && totalTasks > 0 && totalErrors === 0 && totalWarnings === 0 && !hasPltError,
|
|
64
|
+
[styles.error]: (status === 'idle' && totalErrors > 0) || hasPltError,
|
|
65
|
+
[styles.warning]: status === 'idle' && totalErrors === 0 && totalWarnings > 0 && !hasPltError,
|
|
66
66
|
});
|
|
67
67
|
}
|
|
68
68
|
function getCollapsedClassName(isCollapsed) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAwB,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport { useDraggable } from '../../hooks/useDraggable.js';\nimport styles from './StatusBadge.module.css';\nimport { default as cx } from 'classnames';\nimport { useStatus, type CloudpackStatus } from '../CloudpackProvider/useStatus.js';\nimport { elementIds } from '../../constants.js';\nimport type { PageLoadTimeReport } from '../../hooks/usePageLoadTimeReporter.js';\n\nexport interface StatusBadgeProps {\n inline?: boolean;\n onExpand?: () => void;\n onToggle?: () => void;\n pageLoadTimeReport: PageLoadTimeReport;\n}\n\nexport const StatusBadge: React.FC<StatusBadgeProps> = ({ inline, onExpand, pageLoadTimeReport }) => {\n const badgeStatusKey = 'cloudpack.badgeStatus';\n\n const rootElementRef = useRef<HTMLDivElement>(null);\n const dragElementRef = useRef<HTMLDivElement>(null);\n const status = useStatus();\n const [isCollapsed, setIsCollapsed] = useState<boolean>(!!localStorage.getItem(badgeStatusKey));\n\n const shouldRender = status.status !== 'unknown';\n\n const toggleBadgeVisibility = useCallback(() => {\n const newCollapsedState = !isCollapsed;\n console.log('Status badge collapsed state:', newCollapsedState);\n setIsCollapsed(newCollapsedState);\n localStorage.setItem(badgeStatusKey, newCollapsedState ? 'collapsed' : '');\n }, [isCollapsed]);\n\n useDraggable({\n // If we're not yet able to render, don't enable dragging yet.\n // Otherwise the event handlers won't be attached when the component renders.\n enabled: shouldRender && !inline,\n containerElementRef: rootElementRef,\n dragElementRef,\n });\n\n if (!shouldRender) {\n return null;\n }\n\n const metric =\n pageLoadTimeReport.status == 'success' ? (\n <span className={styles.metric} title=\"Page Load Time\">\n in {pageLoadTimeReport.pageLoadTime.toFixed(2)} ms\n </span>\n ) : pageLoadTimeReport.status === 'error' ? (\n <span className={styles.metric} title=\"No Page Load Time\">\n No PLT\n </span>\n ) : null;\n\n const leftChevron = '\\u00AB';\n const rightChevron = '\\u00BB';\n const badge = (\n <div\n id={elementIds.statusBadgeRoot}\n ref={rootElementRef}\n className={`${getStatusClassName(status, !!inline, pageLoadTimeReport.status === 'error')} ${getCollapsedClassName(isCollapsed)}`}\n >\n {!inline && (\n <div ref={dragElementRef} className={styles.gripArea}>\n <div className={styles.grip} />\n <div className={styles.grip} />\n </div>\n )}\n <button className={styles.button} onClick={onExpand} aria-label=\"Expand overlay\">\n <div className={styles.value}>{getStatusString(status)}</div>\n </button>\n <div>\n {getStatsString(status)}\n {metric}\n </div>\n <button className={`${styles.button} ${styles.chevron}`} onClick={toggleBadgeVisibility}>\n {isCollapsed ? leftChevron : rightChevron}\n </button>\n </div>\n );\n\n return inline ? (\n badge\n ) : (\n <div className={styles.fixedOverlay}>\n <div className={styles.contentSurface}>{badge}</div>\n </div>\n );\n};\n\nfunction getStatusString(status: CloudpackStatus): string {\n if (status.status === 'pending') {\n return 'Running';\n }\n\n if (status.totalTasks === 0) {\n return 'Idle';\n }\n\n return status.totalErrors === 0 ? 'Success' : 'Errors';\n}\n\nfunction getStatusClassName(cpStatus: CloudpackStatus, inline: boolean, hasPltError: boolean): string {\n const { status, totalTasks, totalErrors, totalWarnings } = cpStatus;\n return cx(styles.badge, {\n [styles.inline]: inline,\n [styles.building]: status === 'pending' && !hasPltError,\n [styles.success]: status === 'idle' && totalTasks > 0 && totalErrors === 0 && totalWarnings === 0 && !hasPltError,\n [styles.error]: (status === 'idle' && totalErrors > 0) || hasPltError,\n [styles.warning]: status === 'idle' && totalErrors === 0 && totalWarnings > 0 && !hasPltError,\n });\n}\n\nfunction getCollapsedClassName(isCollapsed: boolean): string {\n return cx(styles.badge, {\n [styles.collapsed]: isCollapsed,\n });\n}\n\nfunction getStatsString(status: CloudpackStatus): string {\n const { totalTasks, remainingTasks, totalErrors, totalWarnings } = status;\n if (totalTasks === 0) {\n return '';\n }\n\n return [\n remainingTasks > 0 && `${remainingTasks} of ${totalTasks} tasks pending`,\n remainingTasks === 0 && `${totalTasks} tasks completed`,\n totalErrors === 1 && `${totalErrors} error`,\n totalErrors > 1 && `${totalErrors} errors`,\n totalWarnings === 1 && `${totalWarnings} warning`,\n totalWarnings > 1 && `${totalWarnings} warnings`,\n ]\n .filter(Boolean)\n .join(', ');\n}\n"]}
|
|
@@ -6,7 +6,7 @@ import { usePageLoadTimeReporter } from '../../hooks/usePageLoadTimeReporter.js'
|
|
|
6
6
|
const StatusDialog = React.lazy(() => import('../StatusDialog/StatusDialog.js'));
|
|
7
7
|
const ErrorDialog = React.lazy(() => import('../ErrorDialog/ErrorDialog.js'));
|
|
8
8
|
export const StatusOverlay = () => {
|
|
9
|
-
const
|
|
9
|
+
const pageLoadTimeReport = usePageLoadTimeReporter();
|
|
10
10
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
11
11
|
const status = useStatus();
|
|
12
12
|
const prevStatus = useRef();
|
|
@@ -26,7 +26,7 @@ export const StatusOverlay = () => {
|
|
|
26
26
|
console.log(`Toggling minimized state to ${!isExpanded}`);
|
|
27
27
|
setIsExpanded(!isExpanded);
|
|
28
28
|
}, [isExpanded]);
|
|
29
|
-
const result = unsupported.length ? (React.createElement(ErrorDialog, { unsupported: unsupported })) : isExpanded ? (React.createElement(StatusDialog, { onClose: toggleMinimized })) : (React.createElement(StatusBadge, { onExpand: toggleMinimized,
|
|
29
|
+
const result = unsupported.length ? (React.createElement(ErrorDialog, { unsupported: unsupported })) : isExpanded ? (React.createElement(StatusDialog, { onClose: toggleMinimized })) : (React.createElement(StatusBadge, { onExpand: toggleMinimized, pageLoadTimeReport: pageLoadTimeReport }));
|
|
30
30
|
return React.createElement(React.Suspense, { fallback: null }, result);
|
|
31
31
|
};
|
|
32
32
|
//# sourceMappingURL=StatusOverlay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusOverlay.js","sourceRoot":"","sources":["../../../src/components/StatusOverlay/StatusOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAwB,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAEjF,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC,CAAC;AACjF,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,CAAC;AAE9E,MAAM,CAAC,MAAM,aAAa,GAAa,GAAG,EAAE;IAC1C,MAAM,
|
|
1
|
+
{"version":3,"file":"StatusOverlay.js","sourceRoot":"","sources":["../../../src/components/StatusOverlay/StatusOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAwB,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAEjF,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC,CAAC;AACjF,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,CAAC;AAE9E,MAAM,CAAC,MAAM,aAAa,GAAa,GAAG,EAAE;IAC1C,MAAM,kBAAkB,GAAG,uBAAuB,EAAE,CAAC;IACrD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,MAAM,EAA+B,CAAC;IACzD,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IAEzC,yDAAyD;IACzD,4CAA4C;IAC5C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IACE,CAAC,UAAU;YACX,UAAU,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM;YACrC,MAAM,CAAC,MAAM,KAAK,MAAM;YACxB,CAAC,UAAU,CAAC,OAAO,EAAE,WAAW,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,CAAC,EACpE,CAAC;YACD,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QACD,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC;IAC9B,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,UAAU,EAAE,CAAC,CAAC;QAC1D,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAClC,oBAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,CAC1C,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,oBAAC,YAAY,IAAC,OAAO,EAAE,eAAe,GAAI,CAC3C,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,IAAC,QAAQ,EAAE,eAAe,EAAE,kBAAkB,EAAE,kBAAkB,GAAI,CACnF,CAAC;IAEF,OAAO,oBAAC,KAAK,CAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI,IAAG,MAAM,CAAkB,CAAC;AACnE,CAAC,CAAC","sourcesContent":["import React, { useCallback, useState, useRef } from 'react';\nimport { StatusBadge } from '../StatusBadge/StatusBadge.js';\nimport { useStatus, type CloudpackStatus } from '../CloudpackProvider/useStatus.js';\nimport { useErrorEvents } from '../ErrorDialog/useErrorEvents.js';\nimport { usePageLoadTimeReporter } from '../../hooks/usePageLoadTimeReporter.js';\n\nconst StatusDialog = React.lazy(() => import('../StatusDialog/StatusDialog.js'));\nconst ErrorDialog = React.lazy(() => import('../ErrorDialog/ErrorDialog.js'));\n\nexport const StatusOverlay: React.FC = () => {\n const pageLoadTimeReport = usePageLoadTimeReporter();\n const [isExpanded, setIsExpanded] = useState<boolean>(false);\n const status = useStatus();\n const prevStatus = useRef<CloudpackStatus | undefined>();\n const { unsupported } = useErrorEvents();\n\n // If we haven't set a specific state and we become idle,\n // pop open the details if there are errors.\n React.useEffect(() => {\n if (\n !isExpanded &&\n prevStatus.current?.status !== 'idle' &&\n status.status === 'idle' &&\n (prevStatus.current?.totalErrors || 0) !== (status.totalErrors || 0)\n ) {\n setIsExpanded(true);\n }\n prevStatus.current = status;\n }, [status, isExpanded]);\n\n const toggleMinimized = useCallback(() => {\n console.log(`Toggling minimized state to ${!isExpanded}`);\n setIsExpanded(!isExpanded);\n }, [isExpanded]);\n\n const result = unsupported.length ? (\n <ErrorDialog unsupported={unsupported} />\n ) : isExpanded ? (\n <StatusDialog onClose={toggleMinimized} />\n ) : (\n <StatusBadge onExpand={toggleMinimized} pageLoadTimeReport={pageLoadTimeReport} />\n );\n\n return <React.Suspense fallback={null}>{result}</React.Suspense>;\n};\n"]}
|
|
@@ -1,2 +1,14 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type PageLoadTimeReport = {
|
|
2
|
+
pageLoadTime: number;
|
|
3
|
+
status: 'success';
|
|
4
|
+
} | {
|
|
5
|
+
status: 'error';
|
|
6
|
+
} | {
|
|
7
|
+
status: 'detecting';
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Hook that reports the page load time to the Cloudpack backend.
|
|
11
|
+
* @returns The page load time in milliseconds, or `null` if the page load time could not be determined. `undefined` is returned if the page load time is still being calculated.
|
|
12
|
+
*/
|
|
13
|
+
export declare function usePageLoadTimeReporter(): PageLoadTimeReport;
|
|
2
14
|
//# sourceMappingURL=usePageLoadTimeReporter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePageLoadTimeReporter.d.ts","sourceRoot":"","sources":["../../src/hooks/usePageLoadTimeReporter.ts"],"names":[],"mappings":"AAGA,
|
|
1
|
+
{"version":3,"file":"usePageLoadTimeReporter.d.ts","sourceRoot":"","sources":["../../src/hooks/usePageLoadTimeReporter.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,kBAAkB,GAC1B;IACE,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,SAAS,CAAC;CACnB,GACD;IACE,MAAM,EAAE,OAAO,CAAC;CACjB,GACD;IACE,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEN;;;GAGG;AACH,wBAAgB,uBAAuB,IAAI,kBAAkB,CAwD5D"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useCloudpack } from '../components/CloudpackProvider/CloudpackProvider.js';
|
|
3
|
+
/**
|
|
4
|
+
* Hook that reports the page load time to the Cloudpack backend.
|
|
5
|
+
* @returns The page load time in milliseconds, or `null` if the page load time could not be determined. `undefined` is returned if the page load time is still being calculated.
|
|
6
|
+
*/
|
|
3
7
|
export function usePageLoadTimeReporter() {
|
|
4
|
-
const [
|
|
8
|
+
const [report, setReport] = React.useState({ status: 'detecting' });
|
|
5
9
|
const cloudpack = useCloudpack();
|
|
6
10
|
React.useEffect(() => {
|
|
7
11
|
async function reportPageLoadTime() {
|
|
@@ -18,15 +22,25 @@ export function usePageLoadTimeReporter() {
|
|
|
18
22
|
if (!getBrowserCacheRatio) {
|
|
19
23
|
throw new Error('getBrowserCacheRatio not found on window.__cloudpack');
|
|
20
24
|
}
|
|
21
|
-
const newPageLoadTime = await getPageLoadTime()
|
|
22
|
-
|
|
25
|
+
const newPageLoadTime = await getPageLoadTime()
|
|
26
|
+
.then((value) => {
|
|
27
|
+
setReport({ pageLoadTime: value, status: 'success' });
|
|
28
|
+
return value;
|
|
29
|
+
})
|
|
30
|
+
.catch((err) => {
|
|
31
|
+
console.error('[Cloudpack] Failed to get page load time', err);
|
|
32
|
+
setReport({ status: 'error' });
|
|
33
|
+
return null;
|
|
34
|
+
});
|
|
23
35
|
// Page is loaded, PLT and the browser cache ratio can be reported
|
|
24
36
|
const browserCache = getBrowserCacheRatio();
|
|
25
37
|
await cloudpack.reportSpan.mutate({
|
|
26
38
|
name: 'PAGE_LOAD_TIME',
|
|
27
39
|
// OpenTelemetry doesn't care about the actual start time, start and end time is used to calculate the duration
|
|
28
40
|
startTime: 0,
|
|
29
|
-
|
|
41
|
+
// In case the performance entry is not found, the end time will be 0.
|
|
42
|
+
// Unfortunately, it is not possible to report a span without an endTime.
|
|
43
|
+
endTime: newPageLoadTime ?? 0,
|
|
30
44
|
attributes: {
|
|
31
45
|
path: pageSessionContext.requestPath,
|
|
32
46
|
browserCacheHitCount: browserCache.hit,
|
|
@@ -37,6 +51,6 @@ export function usePageLoadTimeReporter() {
|
|
|
37
51
|
}
|
|
38
52
|
void reportPageLoadTime();
|
|
39
53
|
}, [cloudpack]);
|
|
40
|
-
return
|
|
54
|
+
return report;
|
|
41
55
|
}
|
|
42
56
|
//# sourceMappingURL=usePageLoadTimeReporter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePageLoadTimeReporter.js","sourceRoot":"","sources":["../../src/hooks/usePageLoadTimeReporter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;
|
|
1
|
+
{"version":3,"file":"usePageLoadTimeReporter.js","sourceRoot":"","sources":["../../src/hooks/usePageLoadTimeReporter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAcpF;;;GAGG;AACH,MAAM,UAAU,uBAAuB;IACrC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IACxF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,UAAU,kBAAkB;YAC/B,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;gBACxB,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;YACnD,CAAC;YACD,MAAM,EAAE,eAAe,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC;YAEzF,IAAI,CAAC,eAAe,EAAE,CAAC;gBACrB,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;YACrE,CAAC;YAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACxB,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;YACxE,CAAC;YAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC1B,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;YAC1E,CAAC;YAED,MAAM,eAAe,GAAG,MAAM,eAAe,EAAE;iBAC5C,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;gBACd,SAAS,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;gBACtD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC;iBACD,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;gBACb,OAAO,CAAC,KAAK,CAAC,0CAA0C,EAAE,GAAG,CAAC,CAAC;gBAC/D,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;gBAC/B,OAAO,IAAI,CAAC;YACd,CAAC,CAAC,CAAC;YAEL,kEAAkE;YAClE,MAAM,YAAY,GAAG,oBAAoB,EAAE,CAAC;YAC5C,MAAM,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC;gBAChC,IAAI,EAAE,gBAAgB;gBACtB,+GAA+G;gBAC/G,SAAS,EAAE,CAAC;gBACZ,sEAAsE;gBACtE,yEAAyE;gBACzE,OAAO,EAAE,eAAe,IAAI,CAAC;gBAC7B,UAAU,EAAE;oBACV,IAAI,EAAE,kBAAkB,CAAC,WAAW;oBACpC,oBAAoB,EAAE,YAAY,CAAC,GAAG;oBACtC,sBAAsB,EAAE,YAAY,CAAC,KAAK;oBAC1C,iBAAiB,EAAE,YAAY,CAAC,KAAK;iBACtC;aACF,CAAC,CAAC;QACL,CAAC;QAED,KAAK,kBAAkB,EAAE,CAAC;IAC5B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["import React from 'react';\nimport { useCloudpack } from '../components/CloudpackProvider/CloudpackProvider.js';\n\nexport type PageLoadTimeReport =\n | {\n pageLoadTime: number;\n status: 'success';\n }\n | {\n status: 'error';\n }\n | {\n status: 'detecting';\n };\n\n/**\n * Hook that reports the page load time to the Cloudpack backend.\n * @returns The page load time in milliseconds, or `null` if the page load time could not be determined. `undefined` is returned if the page load time is still being calculated.\n */\nexport function usePageLoadTimeReporter(): PageLoadTimeReport {\n const [report, setReport] = React.useState<PageLoadTimeReport>({ status: 'detecting' });\n const cloudpack = useCloudpack();\n\n React.useEffect(() => {\n async function reportPageLoadTime() {\n if (!window.__cloudpack) {\n throw new Error('Cloudpack not found on window');\n }\n const { getPageLoadTime, getBrowserCacheRatio, pageSessionContext } = window.__cloudpack;\n\n if (!getPageLoadTime) {\n throw new Error('getPageLoadTime not found on window.__cloudpack');\n }\n\n if (!pageSessionContext) {\n throw new Error('pageSessionContext not found on window.__cloudpack');\n }\n\n if (!getBrowserCacheRatio) {\n throw new Error('getBrowserCacheRatio not found on window.__cloudpack');\n }\n\n const newPageLoadTime = await getPageLoadTime()\n .then((value) => {\n setReport({ pageLoadTime: value, status: 'success' });\n return value;\n })\n .catch((err) => {\n console.error('[Cloudpack] Failed to get page load time', err);\n setReport({ status: 'error' });\n return null;\n });\n\n // Page is loaded, PLT and the browser cache ratio can be reported\n const browserCache = getBrowserCacheRatio();\n await cloudpack.reportSpan.mutate({\n name: 'PAGE_LOAD_TIME',\n // OpenTelemetry doesn't care about the actual start time, start and end time is used to calculate the duration\n startTime: 0,\n // In case the performance entry is not found, the end time will be 0.\n // Unfortunately, it is not possible to report a span without an endTime.\n endTime: newPageLoadTime ?? 0,\n attributes: {\n path: pageSessionContext.requestPath,\n browserCacheHitCount: browserCache.hit,\n browserCacheTotalCount: browserCache.total,\n browserCacheRatio: browserCache.ratio,\n },\n });\n }\n\n void reportPageLoadTime();\n }, [cloudpack]);\n\n return report;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ms-cloudpack/overlay",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.125",
|
|
4
4
|
"description": "The Cloudpack overlay ux.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"types": "./lib/index.d.ts",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"prepack": "cp .npmignore dist/.npmignore"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@ms-cloudpack/api-server": "^0.58.
|
|
33
|
-
"@ms-cloudpack/common-types": "^0.24.
|
|
34
|
-
"@ms-cloudpack/common-types-browser": "^0.5.
|
|
32
|
+
"@ms-cloudpack/api-server": "^0.58.14",
|
|
33
|
+
"@ms-cloudpack/common-types": "^0.24.6",
|
|
34
|
+
"@ms-cloudpack/common-types-browser": "^0.5.4",
|
|
35
35
|
"@ms-cloudpack/eslint-plugin-internal": "^0.0.1",
|
|
36
36
|
"@ms-cloudpack/path-string-parsing": "^1.2.6",
|
|
37
37
|
"@ms-cloudpack/scripts": "^0.0.1",
|