@ms-cloudpack/overlay 0.12.2 → 0.13.0
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/ori-output.json +2 -2
- package/lib/components/StatusBadge/StatusBadge.d.ts +2 -1
- package/lib/components/StatusBadge/StatusBadge.js +8 -2
- 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 +1 -1
- package/lib/hooks/usePageLoadTimeReporter.js +3 -0
- package/lib/hooks/usePageLoadTimeReporter.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"type": "buildStatus",
|
|
3
|
-
"buildId": "
|
|
3
|
+
"buildId": "aa03cb46-1477-4a15-8971-9402e3af4940",
|
|
4
4
|
"buildStatus": "complete",
|
|
5
5
|
"internalError": null,
|
|
6
6
|
"warnings": [],
|
|
@@ -8,5 +8,5 @@
|
|
|
8
8
|
"outputFilePaths": [
|
|
9
9
|
"/home/runner/work/cloudpack/cloudpack/packages/overlay/dist/browser-esm/lib/index.js"
|
|
10
10
|
],
|
|
11
|
-
"metafile": "{\n \"inputs\": {\n \"src/components/CloudpackProvider/getCookies.ts\": {\n \"bytes\": 452,\n \"imports\": []\n },\n \"src/components/CloudpackProvider/createCloudpackClient.ts\": {\n \"bytes\": 6514,\n \"imports\": [\n {\n \"path\": \"src/components/CloudpackProvider/getCookies.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"@ms-cloudpack/data-bus\",\n \"kind\": \"import-statement\",\n \"external\": true\n }\n ]\n },\n \"src/components/CloudpackProvider/CloudpackProvider.tsx\": {\n \"bytes\": 552,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/createCloudpackClient.ts\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/hooks/useDraggable.ts\": {\n \"bytes\": 2353,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n }\n ]\n },\n \"src/components/StatusBadge/StatusBadge.module.css\": {\n \"bytes\": 3473,\n \"imports\": []\n },\n \"src/components/CloudpackProvider/useStatus.ts\": {\n \"bytes\": 866,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusBadge/StatusBadge.tsx\": {\n \"bytes\": 2875,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/hooks/useDraggable.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusBadge/StatusBadge.module.css\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/useStatus.ts\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/TaskResultItem.module.css\": {\n \"bytes\": 2067,\n \"imports\": []\n },\n \"src/components/StatusDialog/TaskResultItem.tsx\": {\n \"bytes\": 1433,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/TaskResultItem.module.css\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/TaskStatus.module.css\": {\n \"bytes\": 4179,\n \"imports\": []\n },\n \"src/images/error-24.inline.svg\": {\n \"bytes\": 1024,\n \"imports\": []\n },\n \"src/images/success-24.inline.svg\": {\n \"bytes\": 562,\n \"imports\": []\n },\n \"src/images/chevrondown-20.inline.svg\": {\n \"bytes\": 450,\n \"imports\": []\n },\n \"src/components/Button/Button.module.css\": {\n \"bytes\": 2263,\n \"imports\": []\n },\n \"src/components/Button/Button.tsx\": {\n \"bytes\": 360,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/Button/Button.module.css\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/TaskStatus.tsx\": {\n \"bytes\": 4795,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusDialog/TaskResultItem.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/TaskStatus.module.css\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/images/error-24.inline.svg\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/images/success-24.inline.svg\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/images/chevrondown-20.inline.svg\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/Button/Button.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/CloudpackProvider/useStatusDetails.ts\": {\n \"bytes\": 858,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/TaskList.module.css\": {\n \"bytes\": 615,\n \"imports\": []\n },\n \"src/components/StatusDialog/TaskList.tsx\": {\n \"bytes\": 1204,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusDialog/TaskStatus.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/useStatusDetails.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/TaskList.module.css\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/Dialog/Dialog.module.css\": {\n \"bytes\": 2454,\n \"imports\": []\n },\n \"src/images/dismiss-16-filled.inline.svg\": {\n \"bytes\": 718,\n \"imports\": []\n },\n \"src/components/Dialog/Dialog.tsx\": {\n \"bytes\": 1710,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/Dialog/Dialog.module.css\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/hooks/useDraggable.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/images/dismiss-16-filled.inline.svg\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/Searchbox.module.css\": {\n \"bytes\": 862,\n \"imports\": []\n },\n \"src/components/StatusDialog/Searchbox.tsx\": {\n \"bytes\": 452,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusDialog/Searchbox.module.css\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/StatusDialog.tsx\": {\n \"bytes\": 1134,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusDialog/TaskList.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/Button/Button.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/Dialog/Dialog.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/Searchbox.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/ErrorDialog/PathError.tsx\": {\n \"bytes\": 2731,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusDialog/TaskStatus.module.css\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/images/error-24.inline.svg\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/images/chevrondown-20.inline.svg\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/Button/Button.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/ErrorDialog/ErrorDialog.tsx\": {\n \"bytes\": 1021,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/Button/Button.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/ErrorDialog/PathError.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/TaskList.module.css\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/Dialog/Dialog.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/ErrorDialog/useErrorEvents.ts\": {\n \"bytes\": 3204,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"@ms-cloudpack/path-string-parsing\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/hooks/usePageLoadTimeReporter.ts\": {\n \"bytes\": 625,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusOverlay/StatusOverlay.tsx\": {\n \"bytes\": 1537,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusBadge/StatusBadge.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/StatusDialog.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/useStatus.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/ErrorDialog/ErrorDialog.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/ErrorDialog/useErrorEvents.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/hooks/usePageLoadTimeReporter.ts\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/ThemeProvider/ThemeProvider.module.css\": {\n \"bytes\": 630,\n \"imports\": []\n },\n \"src/components/ThemeProvider/ThemeProvider.tsx\": {\n \"bytes\": 210,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/ThemeProvider/ThemeProvider.module.css\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/index.tsx\": {\n \"bytes\": 689,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react-dom\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusOverlay/StatusOverlay.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/ThemeProvider/ThemeProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n }\n },\n \"outputs\": {\n \"dist/browser-esm/lib/index.js\": {\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react-dom\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"@ms-cloudpack/data-bus\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"@ms-cloudpack/path-string-parsing\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n }\n ],\n \"exports\": [\n \"overlayRootDivId\"\n ],\n \"entryPoint\": \"src/index.tsx\",\n \"inputs\": {\n \"src/index.tsx\": {\n \"bytesInOutput\": 440\n },\n \"src/components/CloudpackProvider/CloudpackProvider.tsx\": {\n \"bytesInOutput\": 366\n },\n \"src/components/CloudpackProvider/getCookies.ts\": {\n \"bytesInOutput\": 317\n },\n \"src/components/CloudpackProvider/createCloudpackClient.ts\": {\n \"bytesInOutput\": 4227\n },\n \"src/components/StatusOverlay/StatusOverlay.tsx\": {\n \"bytesInOutput\": 1052\n },\n \"src/components/StatusBadge/StatusBadge.tsx\": {\n \"bytesInOutput\": 2801\n },\n \"src/hooks/useDraggable.ts\": {\n \"bytesInOutput\": 1803\n },\n \"src/components/StatusBadge/StatusBadge.module.css\": {\n \"bytesInOutput\": 3183\n },\n \"src/components/CloudpackProvider/useStatus.ts\": {\n \"bytesInOutput\": 448\n },\n \"src/components/StatusDialog/StatusDialog.tsx\": {\n \"bytesInOutput\": 864\n },\n \"src/components/StatusDialog/TaskList.tsx\": {\n \"bytesInOutput\": 882\n },\n \"src/components/StatusDialog/TaskStatus.tsx\": {\n \"bytesInOutput\": 5034\n },\n \"src/components/StatusDialog/TaskResultItem.tsx\": {\n \"bytesInOutput\": 1375\n },\n \"src/components/StatusDialog/TaskResultItem.module.css\": {\n \"bytesInOutput\": 1881\n },\n \"src/components/StatusDialog/TaskStatus.module.css\": {\n \"bytesInOutput\": 3889\n },\n \"src/images/error-24.inline.svg\": {\n \"bytesInOutput\": 1085\n },\n \"src/images/success-24.inline.svg\": {\n \"bytesInOutput\": 625\n },\n \"src/images/chevrondown-20.inline.svg\": {\n \"bytesInOutput\": 517\n },\n \"src/components/Button/Button.tsx\": {\n \"bytesInOutput\": 298\n },\n \"src/components/Button/Button.module.css\": {\n \"bytesInOutput\": 2117\n },\n \"src/components/CloudpackProvider/useStatusDetails.ts\": {\n \"bytesInOutput\": 299\n },\n \"src/components/StatusDialog/TaskList.module.css\": {\n \"bytesInOutput\": 541\n },\n \"src/components/Dialog/Dialog.tsx\": {\n \"bytesInOutput\": 1439\n },\n \"src/components/Dialog/Dialog.module.css\": {\n \"bytesInOutput\": 2292\n },\n \"src/images/dismiss-16-filled.inline.svg\": {\n \"bytesInOutput\": 788\n },\n \"src/components/StatusDialog/Searchbox.tsx\": {\n \"bytesInOutput\": 340\n },\n \"src/components/StatusDialog/Searchbox.module.css\": {\n \"bytesInOutput\": 771\n },\n \"src/components/ErrorDialog/ErrorDialog.tsx\": {\n \"bytesInOutput\": 691\n },\n \"src/components/ErrorDialog/PathError.tsx\": {\n \"bytesInOutput\": 3003\n },\n \"src/components/ErrorDialog/useErrorEvents.ts\": {\n \"bytesInOutput\": 2075\n },\n \"src/hooks/usePageLoadTimeReporter.ts\": {\n \"bytesInOutput\": 417\n },\n \"src/components/ThemeProvider/ThemeProvider.tsx\": {\n \"bytesInOutput\": 185\n },\n \"src/components/ThemeProvider/ThemeProvider.module.css\": {\n \"bytesInOutput\": 561\n }\n },\n \"bytes\": 48859\n }\n }\n}\n"
|
|
11
|
+
"metafile": "{\n \"inputs\": {\n \"src/components/CloudpackProvider/getCookies.ts\": {\n \"bytes\": 452,\n \"imports\": []\n },\n \"src/components/CloudpackProvider/createCloudpackClient.ts\": {\n \"bytes\": 6514,\n \"imports\": [\n {\n \"path\": \"src/components/CloudpackProvider/getCookies.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"@ms-cloudpack/data-bus\",\n \"kind\": \"import-statement\",\n \"external\": true\n }\n ]\n },\n \"src/components/CloudpackProvider/CloudpackProvider.tsx\": {\n \"bytes\": 552,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/createCloudpackClient.ts\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/hooks/useDraggable.ts\": {\n \"bytes\": 2353,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n }\n ]\n },\n \"src/components/StatusBadge/StatusBadge.module.css\": {\n \"bytes\": 3608,\n \"imports\": []\n },\n \"src/components/CloudpackProvider/useStatus.ts\": {\n \"bytes\": 866,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusBadge/StatusBadge.tsx\": {\n \"bytes\": 3104,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/hooks/useDraggable.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusBadge/StatusBadge.module.css\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/useStatus.ts\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/TaskResultItem.module.css\": {\n \"bytes\": 2067,\n \"imports\": []\n },\n \"src/components/StatusDialog/TaskResultItem.tsx\": {\n \"bytes\": 1433,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/TaskResultItem.module.css\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/TaskStatus.module.css\": {\n \"bytes\": 4179,\n \"imports\": []\n },\n \"src/images/error-24.inline.svg\": {\n \"bytes\": 1024,\n \"imports\": []\n },\n \"src/images/success-24.inline.svg\": {\n \"bytes\": 562,\n \"imports\": []\n },\n \"src/images/chevrondown-20.inline.svg\": {\n \"bytes\": 450,\n \"imports\": []\n },\n \"src/components/Button/Button.module.css\": {\n \"bytes\": 2263,\n \"imports\": []\n },\n \"src/components/Button/Button.tsx\": {\n \"bytes\": 360,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/Button/Button.module.css\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/TaskStatus.tsx\": {\n \"bytes\": 4795,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusDialog/TaskResultItem.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/TaskStatus.module.css\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/images/error-24.inline.svg\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/images/success-24.inline.svg\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/images/chevrondown-20.inline.svg\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/Button/Button.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/CloudpackProvider/useStatusDetails.ts\": {\n \"bytes\": 858,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/TaskList.module.css\": {\n \"bytes\": 615,\n \"imports\": []\n },\n \"src/components/StatusDialog/TaskList.tsx\": {\n \"bytes\": 1204,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusDialog/TaskStatus.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/useStatusDetails.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/TaskList.module.css\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/Dialog/Dialog.module.css\": {\n \"bytes\": 2454,\n \"imports\": []\n },\n \"src/images/dismiss-16-filled.inline.svg\": {\n \"bytes\": 718,\n \"imports\": []\n },\n \"src/components/Dialog/Dialog.tsx\": {\n \"bytes\": 1710,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/Dialog/Dialog.module.css\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/hooks/useDraggable.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/images/dismiss-16-filled.inline.svg\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/Searchbox.module.css\": {\n \"bytes\": 862,\n \"imports\": []\n },\n \"src/components/StatusDialog/Searchbox.tsx\": {\n \"bytes\": 452,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusDialog/Searchbox.module.css\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusDialog/StatusDialog.tsx\": {\n \"bytes\": 1134,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusDialog/TaskList.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/Button/Button.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/Dialog/Dialog.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/Searchbox.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/ErrorDialog/PathError.tsx\": {\n \"bytes\": 2731,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusDialog/TaskStatus.module.css\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/images/error-24.inline.svg\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/images/chevrondown-20.inline.svg\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/Button/Button.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/ErrorDialog/ErrorDialog.tsx\": {\n \"bytes\": 1021,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/Button/Button.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/ErrorDialog/PathError.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/TaskList.module.css\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/Dialog/Dialog.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/ErrorDialog/useErrorEvents.ts\": {\n \"bytes\": 3204,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"@ms-cloudpack/path-string-parsing\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/hooks/usePageLoadTimeReporter.ts\": {\n \"bytes\": 754,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/StatusOverlay/StatusOverlay.tsx\": {\n \"bytes\": 1586,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/StatusBadge/StatusBadge.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusDialog/StatusDialog.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/CloudpackProvider/useStatus.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/ErrorDialog/ErrorDialog.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/ErrorDialog/useErrorEvents.ts\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/hooks/usePageLoadTimeReporter.ts\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/components/ThemeProvider/ThemeProvider.module.css\": {\n \"bytes\": 630,\n \"imports\": []\n },\n \"src/components/ThemeProvider/ThemeProvider.tsx\": {\n \"bytes\": 210,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/ThemeProvider/ThemeProvider.module.css\",\n \"kind\": \"import-statement\"\n }\n ]\n },\n \"src/index.tsx\": {\n \"bytes\": 689,\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react-dom\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/StatusOverlay/StatusOverlay.tsx\",\n \"kind\": \"import-statement\"\n },\n {\n \"path\": \"src/components/ThemeProvider/ThemeProvider.tsx\",\n \"kind\": \"import-statement\"\n }\n ]\n }\n },\n \"outputs\": {\n \"dist/browser-esm/lib/index.js\": {\n \"imports\": [\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react-dom\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"@ms-cloudpack/data-bus\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"classnames\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"@ms-cloudpack/path-string-parsing\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n },\n {\n \"path\": \"react\",\n \"kind\": \"import-statement\",\n \"external\": true\n }\n ],\n \"exports\": [\n \"overlayRootDivId\"\n ],\n \"entryPoint\": \"src/index.tsx\",\n \"inputs\": {\n \"src/index.tsx\": {\n \"bytesInOutput\": 440\n },\n \"src/components/CloudpackProvider/CloudpackProvider.tsx\": {\n \"bytesInOutput\": 366\n },\n \"src/components/CloudpackProvider/getCookies.ts\": {\n \"bytesInOutput\": 317\n },\n \"src/components/CloudpackProvider/createCloudpackClient.ts\": {\n \"bytesInOutput\": 4227\n },\n \"src/components/StatusOverlay/StatusOverlay.tsx\": {\n \"bytesInOutput\": 1087\n },\n \"src/components/StatusBadge/StatusBadge.tsx\": {\n \"bytesInOutput\": 3024\n },\n \"src/hooks/useDraggable.ts\": {\n \"bytesInOutput\": 1803\n },\n \"src/components/StatusBadge/StatusBadge.module.css\": {\n \"bytesInOutput\": 3305\n },\n \"src/components/CloudpackProvider/useStatus.ts\": {\n \"bytesInOutput\": 448\n },\n \"src/components/StatusDialog/StatusDialog.tsx\": {\n \"bytesInOutput\": 864\n },\n \"src/components/StatusDialog/TaskList.tsx\": {\n \"bytesInOutput\": 882\n },\n \"src/components/StatusDialog/TaskStatus.tsx\": {\n \"bytesInOutput\": 5034\n },\n \"src/components/StatusDialog/TaskResultItem.tsx\": {\n \"bytesInOutput\": 1375\n },\n \"src/components/StatusDialog/TaskResultItem.module.css\": {\n \"bytesInOutput\": 1881\n },\n \"src/components/StatusDialog/TaskStatus.module.css\": {\n \"bytesInOutput\": 3889\n },\n \"src/images/error-24.inline.svg\": {\n \"bytesInOutput\": 1085\n },\n \"src/images/success-24.inline.svg\": {\n \"bytesInOutput\": 625\n },\n \"src/images/chevrondown-20.inline.svg\": {\n \"bytesInOutput\": 517\n },\n \"src/components/Button/Button.tsx\": {\n \"bytesInOutput\": 298\n },\n \"src/components/Button/Button.module.css\": {\n \"bytesInOutput\": 2117\n },\n \"src/components/CloudpackProvider/useStatusDetails.ts\": {\n \"bytesInOutput\": 299\n },\n \"src/components/StatusDialog/TaskList.module.css\": {\n \"bytesInOutput\": 541\n },\n \"src/components/Dialog/Dialog.tsx\": {\n \"bytesInOutput\": 1439\n },\n \"src/components/Dialog/Dialog.module.css\": {\n \"bytesInOutput\": 2292\n },\n \"src/images/dismiss-16-filled.inline.svg\": {\n \"bytesInOutput\": 788\n },\n \"src/components/StatusDialog/Searchbox.tsx\": {\n \"bytesInOutput\": 340\n },\n \"src/components/StatusDialog/Searchbox.module.css\": {\n \"bytesInOutput\": 771\n },\n \"src/components/ErrorDialog/ErrorDialog.tsx\": {\n \"bytesInOutput\": 691\n },\n \"src/components/ErrorDialog/PathError.tsx\": {\n \"bytesInOutput\": 3003\n },\n \"src/components/ErrorDialog/useErrorEvents.ts\": {\n \"bytesInOutput\": 2075\n },\n \"src/hooks/usePageLoadTimeReporter.ts\": {\n \"bytesInOutput\": 542\n },\n \"src/components/ThemeProvider/ThemeProvider.tsx\": {\n \"bytesInOutput\": 185\n },\n \"src/components/ThemeProvider/ThemeProvider.module.css\": {\n \"bytesInOutput\": 561\n }\n },\n \"bytes\": 49364\n }\n }\n}\n"
|
|
12
12
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export interface StatusBadgeProps {
|
|
2
2
|
inline?: boolean;
|
|
3
3
|
onExpand?: () => void;
|
|
4
|
+
pageLoadTime?: number;
|
|
4
5
|
}
|
|
5
|
-
export declare function StatusBadge({ inline, onExpand }: StatusBadgeProps): JSX.Element | null;
|
|
6
|
+
export declare function StatusBadge({ inline, onExpand, pageLoadTime }: StatusBadgeProps): JSX.Element | null;
|
|
@@ -3,7 +3,7 @@ import { useDraggable } from '../../hooks/useDraggable.js';
|
|
|
3
3
|
import styles from './StatusBadge.module.css';
|
|
4
4
|
import { default as cx } from 'classnames';
|
|
5
5
|
import { useStatus } from '../CloudpackProvider/useStatus.js';
|
|
6
|
-
export function StatusBadge({ inline, onExpand }) {
|
|
6
|
+
export function StatusBadge({ inline, onExpand, pageLoadTime }) {
|
|
7
7
|
const rootElementRef = useRef(null);
|
|
8
8
|
const dragElementRef = useRef(null);
|
|
9
9
|
const status = useStatus();
|
|
@@ -18,13 +18,19 @@ export function StatusBadge({ inline, onExpand }) {
|
|
|
18
18
|
if (!shouldRender) {
|
|
19
19
|
return null;
|
|
20
20
|
}
|
|
21
|
+
const metric = pageLoadTime ? (React.createElement("span", { className: styles.metric, title: "Page Load Time" },
|
|
22
|
+
"in ",
|
|
23
|
+
pageLoadTime.toFixed(2),
|
|
24
|
+
" ms")) : null;
|
|
21
25
|
const badge = (React.createElement("div", { ref: rootElementRef, className: getStatusClassName(status, !!inline) },
|
|
22
26
|
!inline && (React.createElement("div", { ref: dragElementRef, className: styles.gripArea },
|
|
23
27
|
React.createElement("div", { className: styles.grip }),
|
|
24
28
|
React.createElement("div", { className: styles.grip }))),
|
|
25
29
|
React.createElement("button", { className: styles.button, onClick: onExpand, "aria-label": "Expand overlay" },
|
|
26
30
|
React.createElement("div", { className: styles.value }, getStatusString(status))),
|
|
27
|
-
React.createElement("div", null,
|
|
31
|
+
React.createElement("div", null,
|
|
32
|
+
getStatsString(status),
|
|
33
|
+
metric)));
|
|
28
34
|
return inline ? (badge) : (React.createElement("div", { className: styles.fixedOverlay },
|
|
29
35
|
React.createElement("div", { className: styles.contentSurface }, badge)));
|
|
30
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,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;
|
|
1
|
+
{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,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;AAQpF,MAAM,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAoB;IAC9E,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC;IAEjD,YAAY,CAAC;QACX,8DAA8D;QAC9D,6EAA6E;QAC7E,OAAO,EAAE,YAAY,IAAI,CAAC,MAAM;QAChC,mBAAmB,EAAE,cAAc;QACnC,cAAc;KACf,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,EAAE;QACjB,OAAO,IAAI,CAAC;KACb;IAED,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAC5B,8BAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAC,gBAAgB;;QAChD,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;cACtB,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,KAAK,GAAG,CACZ,6BAAK,GAAG,EAAE,cAAc,EAAE,SAAS,EAAE,kBAAkB,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC;QACtE,CAAC,MAAM,IAAI,CACV,6BAAK,GAAG,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ;YAClD,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;YAC/B,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI,CAC3B,CACP;QACD,gCAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,gBAAa,gBAAgB;YAC9E,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,eAAe,CAAC,MAAM,CAAC,CAAO,CACtD;QACT;YACG,cAAc,CAAC,MAAM,CAAC;YACtB,MAAM,CACH,CACF,CACP,CAAC;IAEF,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,KAAK,CACN,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAE,MAAM,CAAC,YAAY;QACjC,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc,IAAG,KAAK,CAAO,CAChD,CACP,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,MAAuB;IAC9C,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,EAAE;QAC/B,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,MAAM,CAAC,UAAU,KAAK,CAAC,EAAE;QAC3B,OAAO,MAAM,CAAC;KACf;IAED,OAAO,MAAM,CAAC,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;AACzD,CAAC;AAED,SAAS,kBAAkB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAmB,EAAE,MAAe;IAC9G,OAAO,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;QACtB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM;QACvB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,SAAS;QACvC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,IAAI,UAAU,GAAG,CAAC,IAAI,WAAW,KAAK,CAAC,IAAI,aAAa,KAAK,CAAC;QACjG,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,IAAI,WAAW,GAAG,CAAC;QACpD,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,IAAI,WAAW,KAAK,CAAC,IAAI,aAAa,GAAG,CAAC;KAC9E,CAAC,CAAC;AACL,CAAC;AAED,SAAS,cAAc,CAAC,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAmB;IACjG,IAAI,UAAU,KAAK,CAAC,EAAE;QACpB,OAAO,EAAE,CAAC;KACX;IAED,OAAO;QACL,cAAc,GAAG,CAAC,IAAI,GAAG,cAAc,OAAO,UAAU,gBAAgB;QACxE,cAAc,KAAK,CAAC,IAAI,GAAG,UAAU,kBAAkB;QACvD,WAAW,KAAK,CAAC,IAAI,GAAG,WAAW,QAAQ;QAC3C,WAAW,GAAG,CAAC,IAAI,GAAG,WAAW,SAAS;QAC1C,aAAa,KAAK,CAAC,IAAI,GAAG,aAAa,UAAU;QACjD,aAAa,GAAG,CAAC,IAAI,GAAG,aAAa,WAAW;KACjD;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC","sourcesContent":["import React, { useRef } 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';\n\nexport interface StatusBadgeProps {\n inline?: boolean;\n onExpand?: () => void;\n pageLoadTime?: number;\n}\n\nexport function StatusBadge({ inline, onExpand, pageLoadTime }: StatusBadgeProps) {\n const rootElementRef = useRef<HTMLDivElement>(null);\n const dragElementRef = useRef<HTMLDivElement>(null);\n const status = useStatus();\n\n const shouldRender = status.status !== 'unknown';\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 = pageLoadTime ? (\n <span className={styles.metric} title=\"Page Load Time\">\n in {pageLoadTime.toFixed(2)} ms\n </span>\n ) : null;\n\n const badge = (\n <div ref={rootElementRef} className={getStatusClassName(status, !!inline)}>\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 </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) {\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({ status, totalTasks, totalErrors, totalWarnings }: CloudpackStatus, inline: boolean) {\n return cx(styles.badge, {\n [styles.inline]: inline,\n [styles.building]: status === 'pending',\n [styles.success]: status === 'idle' && totalTasks > 0 && totalErrors === 0 && totalWarnings === 0,\n [styles.error]: status === 'idle' && totalErrors > 0,\n [styles.warning]: status === 'idle' && totalErrors === 0 && totalWarnings > 0,\n });\n}\n\nfunction getStatsString({ totalTasks, remainingTasks, totalErrors, totalWarnings }: CloudpackStatus) {\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 { ErrorDialog } from '../ErrorDialog/ErrorDialog.js';
|
|
|
6
6
|
import { useErrorEvents } from '../ErrorDialog/useErrorEvents.js';
|
|
7
7
|
import { usePageLoadTimeReporter } from '../../hooks/usePageLoadTimeReporter.js';
|
|
8
8
|
export function StatusOverlay() {
|
|
9
|
-
usePageLoadTimeReporter();
|
|
9
|
+
const pageLoadTime = usePageLoadTimeReporter();
|
|
10
10
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
11
11
|
const status = useStatus();
|
|
12
12
|
const prevStatus = useRef();
|
|
@@ -26,6 +26,6 @@ export function StatusOverlay() {
|
|
|
26
26
|
console.log(`Toggling minimized state to ${!isExpanded}`);
|
|
27
27
|
setIsExpanded(!isExpanded);
|
|
28
28
|
}, [isExpanded]);
|
|
29
|
-
return unsupported.length ? (React.createElement(ErrorDialog, { unsupported: unsupported })) : isExpanded ? (React.createElement(StatusDialog, { onClose: toggleMinimized })) : (React.createElement(StatusBadge, { onExpand: toggleMinimized }));
|
|
29
|
+
return unsupported.length ? (React.createElement(ErrorDialog, { unsupported: unsupported })) : isExpanded ? (React.createElement(StatusDialog, { onClose: toggleMinimized })) : (React.createElement(StatusBadge, { onExpand: toggleMinimized, pageLoadTime: pageLoadTime }));
|
|
30
30
|
}
|
|
31
31
|
//# 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,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAwB,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAEjF,MAAM,UAAU,aAAa;IAC3B,uBAAuB,EAAE,CAAC;
|
|
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,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAwB,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAEjF,MAAM,UAAU,aAAa;IAC3B,MAAM,YAAY,GAAG,uBAAuB,EAAE,CAAC;IAC/C,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;YACA,aAAa,CAAC,IAAI,CAAC,CAAC;SACrB;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,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAC1B,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,YAAY,EAAE,YAAY,GAAI,CACvE,CAAC;AACJ,CAAC","sourcesContent":["import React, { useCallback, useState, useRef } from 'react';\nimport { StatusBadge } from '../StatusBadge/StatusBadge.js';\nimport { StatusDialog } from '../StatusDialog/StatusDialog.js';\nimport { useStatus, type CloudpackStatus } from '../CloudpackProvider/useStatus.js';\nimport { ErrorDialog } from '../ErrorDialog/ErrorDialog.js';\nimport { useErrorEvents } from '../ErrorDialog/useErrorEvents.js';\nimport { usePageLoadTimeReporter } from '../../hooks/usePageLoadTimeReporter.js';\n\nexport function StatusOverlay() {\n const pageLoadTime = 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 return unsupported.length ? (\n <ErrorDialog unsupported={unsupported} />\n ) : isExpanded ? (\n <StatusDialog onClose={toggleMinimized} />\n ) : (\n <StatusBadge onExpand={toggleMinimized} pageLoadTime={pageLoadTime} />\n );\n}\n"]}
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useCloudpack } from '../components/CloudpackProvider/CloudpackProvider.js';
|
|
3
3
|
export function usePageLoadTimeReporter() {
|
|
4
|
+
const [pageLoadTime, setPageLoadTime] = React.useState();
|
|
4
5
|
const cloudpack = useCloudpack();
|
|
5
6
|
React.useEffect(() => {
|
|
6
7
|
async function reportPageLoadTime() {
|
|
7
8
|
const { getPageLoadTime } = window.__cloudpack;
|
|
8
9
|
const pageLoadTime = await getPageLoadTime();
|
|
10
|
+
setPageLoadTime(pageLoadTime);
|
|
9
11
|
cloudpack.reportMetric({ metric: 'PAGE_LOAD_TIME', value: pageLoadTime });
|
|
10
12
|
}
|
|
11
13
|
void reportPageLoadTime();
|
|
12
14
|
}, [cloudpack]);
|
|
15
|
+
return pageLoadTime;
|
|
13
16
|
}
|
|
14
17
|
//# 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;AAUpF,MAAM,UAAU,uBAAuB;IACrC,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,UAAU,kBAAkB;YAC/B,MAAM,EAAE,eAAe,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC;YAC/C,MAAM,YAAY,GAAG,MAAM,eAAe,EAAE,CAAC;YAC7C,SAAS,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;QAC5E,CAAC;QAED,KAAK,kBAAkB,EAAE,CAAC;IAC5B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,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;AAUpF,MAAM,UAAU,uBAAuB;IACrC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAU,CAAC;IACjE,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,UAAU,kBAAkB;YAC/B,MAAM,EAAE,eAAe,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC;YAC/C,MAAM,YAAY,GAAG,MAAM,eAAe,EAAE,CAAC;YAC7C,eAAe,CAAC,YAAY,CAAC,CAAC;YAC9B,SAAS,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;QAC5E,CAAC;QAED,KAAK,kBAAkB,EAAE,CAAC;IAC5B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["import React from 'react';\nimport { useCloudpack } from '../components/CloudpackProvider/CloudpackProvider.js';\n\ndeclare global {\n interface Window {\n __cloudpack: {\n getPageLoadTime: () => Promise<number>;\n };\n }\n}\n\nexport function usePageLoadTimeReporter() {\n const [pageLoadTime, setPageLoadTime] = React.useState<number>();\n const cloudpack = useCloudpack();\n\n React.useEffect(() => {\n async function reportPageLoadTime() {\n const { getPageLoadTime } = window.__cloudpack;\n const pageLoadTime = await getPageLoadTime();\n setPageLoadTime(pageLoadTime);\n cloudpack.reportMetric({ metric: 'PAGE_LOAD_TIME', value: pageLoadTime });\n }\n\n void reportPageLoadTime();\n }, [cloudpack]);\n\n return pageLoadTime;\n}\n"]}
|