refactor(frontend): clean up usage of corsworker across codebase

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' });
     },
 
     /**

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 });
     },
   };
 }

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);

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' });

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' });

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' });

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' });