diff --git a/package.json b/package.json index f49dd761f6..cde725c197 100644 --- a/package.json +++ b/package.json @@ -108,6 +108,7 @@ "@types/d3-scale-chromatic": "3.0.0", "@types/debounce-promise": "3.1.6", "@types/diff": "^5", + "@types/dom-to-image": "^2", "@types/eslint": "8.44.0", "@types/file-saver": "2.0.5", "@types/glob": "^8.0.0", @@ -318,6 +319,7 @@ "date-fns": "2.30.0", "debounce-promise": "3.1.2", "diff": "^5.1.0", + "dom-to-image": "^2.6.0", "emotion": "11.0.0", "eventemitter3": "5.0.1", "fast-deep-equal": "^3.1.3", diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx index bef1007f7e..539635908e 100644 --- a/public/app/core/components/AppChrome/AppChrome.tsx +++ b/public/app/core/components/AppChrome/AppChrome.tsx @@ -7,6 +7,7 @@ import { useStyles2, LinkButton, useTheme2 } from '@grafana/ui'; import config from 'app/core/config'; import { useGrafana } from 'app/core/context/GrafanaContext'; import { CommandPalette } from 'app/features/commandPalette/CommandPalette'; +import { useOpspilotMetadata } from 'app/intergral/useOpspilotMetadata'; import { KioskMode } from 'app/types'; import { AppChromeMenu } from './AppChromeMenu'; @@ -25,6 +26,7 @@ export function AppChrome({ children }: Props) { const searchBarHidden = state.searchBarHidden || state.kioskMode === KioskMode.TV || true; const theme = useTheme2(); const styles = useStyles2(getStyles); + useOpspilotMetadata(); const contentClass = cx({ [styles.content]: true, diff --git a/public/app/intergral/useOpspilotMetadata.ts b/public/app/intergral/useOpspilotMetadata.ts new file mode 100644 index 0000000000..992526a151 --- /dev/null +++ b/public/app/intergral/useOpspilotMetadata.ts @@ -0,0 +1,27 @@ +import domtoimage from 'dom-to-image'; +import { useEffect } from 'react'; + +import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv'; + + +export const useOpspilotMetadata = () => { + useEffect(() => { + const event = async (event: MessageEvent) => { + if (event.data.type === 'opspilot-host.getMetadata') { + const screenshot = await domtoimage.toPng(document.querySelector('main') as HTMLElement, { bgcolor: '#000' }); + window.parent.postMessage({type: "opspilot-slave.sendMetadata", metadata: { + url: window.location.pathname, + timeStart: getTimeSrv().timeRange().from.valueOf(), + timeEnd: getTimeSrv().timeRange().to.valueOf(), + timezone: getTimeSrv().timeModel?.getTimezone() === 'browser' ? Intl.DateTimeFormat().resolvedOptions().timeZone : getTimeSrv().timeModel?.getTimezone(), + screenshot: screenshot + } }, '*'); + } + }; + window.addEventListener('message', event); + return () => { + window.removeEventListener('message', event); + } + }, []); + +} diff --git a/yarn.lock b/yarn.lock index de50517979..66cdd1fac1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8487,6 +8487,13 @@ __metadata: languageName: node linkType: hard +"@types/dom-to-image@npm:^2": + version: 2.6.7 + resolution: "@types/dom-to-image@npm:2.6.7" + checksum: aecdd8bb06b23026ea169fd567f66f4dc19843efc9b8fc96464a86c670eaab4b7a58408f8b6aeec42d115c001a2b2a0935b19960d980d8ae84148017f731a68e + languageName: node + linkType: hard + "@types/dompurify@npm:^2": version: 2.4.0 resolution: "@types/dompurify@npm:2.4.0" @@ -14444,6 +14451,13 @@ __metadata: languageName: node linkType: hard +"dom-to-image@npm:^2.6.0": + version: 2.6.0 + resolution: "dom-to-image@npm:2.6.0" + checksum: bf8d174c50b7fabc07b4d369478695f78fd5e84f68681eb3dcb951a80ff173b1e026faf7020d34fbed2595508e2c977346439635fb9c201d98963fee4763ebad + languageName: node + linkType: hard + "domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0": version: 2.3.0 resolution: "domelementtype@npm:2.3.0" @@ -17385,6 +17399,7 @@ __metadata: "@types/d3-scale-chromatic": "npm:3.0.0" "@types/debounce-promise": "npm:3.1.6" "@types/diff": "npm:^5" + "@types/dom-to-image": "npm:^2" "@types/eslint": "npm:8.44.0" "@types/file-saver": "npm:2.0.5" "@types/glob": "npm:^8.0.0" @@ -17479,6 +17494,7 @@ __metadata: date-fns: "npm:2.30.0" debounce-promise: "npm:3.1.2" diff: "npm:^5.1.0" + dom-to-image: "npm:^2.6.0" emotion: "npm:11.0.0" esbuild: "npm:0.18.12" esbuild-loader: "npm:3.0.1"