From 416afce6423c5fbcac692e718f0da737cd06441f Mon Sep 17 00:00:00 2001 From: Jack Westbrook Date: Tue, 3 Dec 2024 17:13:52 +0100 Subject: [PATCH] refactor(frontend): clean up usage of corsworker across codebase --- public/app/core/crash/index.ts | 4 +-- public/app/core/monacoEnv.ts | 14 +++++----- public/app/core/utils/CorsWorker.ts | 26 ++----------------- .../unified/createRouteGroupsMatcherWorker.ts | 4 +-- .../saving/createDetectChangesWorker.ts | 4 +-- .../createCentrifugeServiceWorker.ts | 4 +-- .../panel/nodeGraph/createLayoutWorker.ts | 6 ++--- 7 files changed, 20 insertions(+), 42 deletions(-) diff --git a/public/app/core/crash/index.ts b/public/app/core/crash/index.ts index 68022a81aea..929ff7ef7e4 100644 --- a/public/app/core/crash/index.ts +++ b/public/app/core/crash/index.ts @@ -3,7 +3,7 @@ import { BaseStateReport } from 'crashme/dist/types'; import { nanoid } from 'nanoid'; import { config, createMonitoringLogger } from '@grafana/runtime'; -import { CorsWorker as Worker } from 'app/core/utils/CorsWorker'; +import { corsWorker } from 'app/core/utils/CorsWorker'; import { contextSrv } from '../services/context_srv'; import { CorsSharedWorker as SharedWorker, sharedWorkersSupported } from '../utils/CorsSharedWorker'; @@ -48,7 +48,7 @@ export function initializeCrashDetection() { dbName: 'grafana.crashes', createClientWorker(): Worker { - return new Worker(new URL('./client.worker', import.meta.url)); + return corsWorker('./client.worker', { name: 'crash' }); }, /** diff --git a/public/app/core/monacoEnv.ts b/public/app/core/monacoEnv.ts index 6319be99373..8c18b808b68 100644 --- a/public/app/core/monacoEnv.ts +++ b/public/app/core/monacoEnv.ts @@ -6,7 +6,7 @@ import typescriptWorkerUrl from 'monaco-editor/esm/vs/language/typescript/ts.wor import { monacoLanguageRegistry } from '@grafana/data'; -import { WorkaroundWorker } from './utils/CorsWorker'; +import { corsWorker } from './utils/CorsWorker'; export function setMonacoEnv() { self.MonacoEnvironment = { @@ -15,26 +15,26 @@ export function setMonacoEnv() { if (language) { const moduleUrl = language.init(); - return WorkaroundWorker(moduleUrl, { name: label }); + return corsWorker(moduleUrl, { name: label }); } if (label === 'json') { - return WorkaroundWorker(jsonWorkerUrl, { name: label }); + return corsWorker(jsonWorkerUrl, { name: label }); } if (label === 'css' || label === 'scss' || label === 'less') { - return WorkaroundWorker(cssWorkerUrl, { name: label }); + return corsWorker(cssWorkerUrl, { name: label }); } if (label === 'html' || label === 'handlebars' || label === 'razor') { - return WorkaroundWorker(htmlWorkerUrl, { name: label }); + return corsWorker(htmlWorkerUrl, { name: label }); } if (label === 'typescript' || label === 'javascript') { - return WorkaroundWorker(typescriptWorkerUrl, { name: label }); + return corsWorker(typescriptWorkerUrl, { name: label }); } - return WorkaroundWorker(editorWorkerUrl, { name: label }); + return corsWorker(editorWorkerUrl, { name: label }); }, }; } diff --git a/public/app/core/utils/CorsWorker.ts b/public/app/core/utils/CorsWorker.ts index 6c01343af2c..ef71e918cb5 100644 --- a/public/app/core/utils/CorsWorker.ts +++ b/public/app/core/utils/CorsWorker.ts @@ -1,27 +1,5 @@ -// works with webpack plugin: scripts/webpack/plugins/CorsWorkerPlugin.js -export class CorsWorker extends window.Worker { - constructor(url: URL, options?: WorkerOptions) { - // by default, worker inherits HTML document's location and pathname which leads to wrong public path value - // the CorsWorkerPlugin will override it with the value based on the initial worker chunk, ie. - // initial worker chunk: http://host.com/cdn/scripts/worker-123.js - // resulting public path: http://host.com/cdn/scripts - - const scriptUrl = url.toString(); - const scriptsBasePathUrl = new URL('.', url).toString(); - - const importScripts = `importScripts('${scriptUrl}');`; - const objectURL = URL.createObjectURL( - new Blob([`__webpack_worker_public_path__ = '${scriptsBasePathUrl}'; ${importScripts}`], { - type: 'application/javascript', - }) - ); - super(objectURL, options); - URL.revokeObjectURL(objectURL); - } -} - -// Vite equivalent of the above CorsWorker to allow loading workers from a different origin -export function WorkaroundWorker(workerUrl: string, options: WorkerOptions) { +// This function is used to create a worker that can be used to fetch data from a different domain (e.g. CDN). +export function corsWorker(workerUrl: string, options: WorkerOptions) { const js = `import ${JSON.stringify(new URL(workerUrl, import.meta.url))}`; const blob = new Blob([js], { type: 'application/javascript' }); const objURL = URL.createObjectURL(blob); diff --git a/public/app/features/alerting/unified/createRouteGroupsMatcherWorker.ts b/public/app/features/alerting/unified/createRouteGroupsMatcherWorker.ts index ecdfbc3fe00..831714e6e79 100644 --- a/public/app/features/alerting/unified/createRouteGroupsMatcherWorker.ts +++ b/public/app/features/alerting/unified/createRouteGroupsMatcherWorker.ts @@ -1,5 +1,5 @@ -import { CorsWorker as Worker } from 'app/core/utils/CorsWorker'; +import { corsWorker } from 'app/core/utils/CorsWorker'; // CorsWorker is needed as a workaround for CORS issue caused // by static assets served from an url different from origin -export const createWorker = () => new Worker(new URL('./routeGroupsMatcher.worker.ts', import.meta.url)); +export const createWorker = () => corsWorker('./routeGroupsMatcher.worker.ts', { name: 'routeGroupsMatcher' }); diff --git a/public/app/features/dashboard-scene/saving/createDetectChangesWorker.ts b/public/app/features/dashboard-scene/saving/createDetectChangesWorker.ts index f2a835fbf5e..5a144e2c387 100644 --- a/public/app/features/dashboard-scene/saving/createDetectChangesWorker.ts +++ b/public/app/features/dashboard-scene/saving/createDetectChangesWorker.ts @@ -1,3 +1,3 @@ -import { CorsWorker as Worker } from 'app/core/utils/CorsWorker'; +import { corsWorker } from 'app/core/utils/CorsWorker'; -export const createWorker = () => new Worker(new URL('./DetectChangesWorker.ts', import.meta.url)); +export const createWorker = () => corsWorker('./DetectChangesWorker.ts', { name: 'detectChanges' }); diff --git a/public/app/features/live/centrifuge/createCentrifugeServiceWorker.ts b/public/app/features/live/centrifuge/createCentrifugeServiceWorker.ts index c7c68f5b0e7..6f3914245cf 100644 --- a/public/app/features/live/centrifuge/createCentrifugeServiceWorker.ts +++ b/public/app/features/live/centrifuge/createCentrifugeServiceWorker.ts @@ -1,3 +1,3 @@ -import { CorsWorker as Worker } from 'app/core/utils/CorsWorker'; +import { corsWorker } from 'app/core/utils/CorsWorker'; -export const createWorker = () => new Worker(new URL('./service.worker.ts', import.meta.url)); +export const createWorker = () => corsWorker('./service.worker.ts', { name: 'centrifuge' }); diff --git a/public/app/plugins/panel/nodeGraph/createLayoutWorker.ts b/public/app/plugins/panel/nodeGraph/createLayoutWorker.ts index 1f4f12eb318..9419a3b7104 100644 --- a/public/app/plugins/panel/nodeGraph/createLayoutWorker.ts +++ b/public/app/plugins/panel/nodeGraph/createLayoutWorker.ts @@ -1,4 +1,4 @@ -import { CorsWorker as Worker } from 'app/core/utils/CorsWorker'; +import { corsWorker } from 'app/core/utils/CorsWorker'; -export const createWorker = () => new Worker(new URL('./layout.worker.js', import.meta.url)); -export const createMsaglWorker = () => new Worker(new URL('./layeredLayout.worker.js', import.meta.url)); +export const createWorker = () => corsWorker('./layout.worker.js', { name: 'nodeGraphLayout' }); +export const createMsaglWorker = () => corsWorker('./layeredLayout.worker.js', { name: 'nodeGraphLayeredLayout' });