EchoSrv: Remove $.ajax for loading scripts (#56678)

* user essentials mob! 🔱

lastFile:public/app/core/services/echo/backends/analytics/RudderstackBackend.ts

* user essentials mob! 🔱

lastFile:public/app/core/services/echo/backends/analytics/ApplicationInsightsBackend.ts

* user essentials mob! 🔱

Co-authored-by: Joao Silva <joao.silva@grafana.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

public/app/core/services/echo/backends/analytics/ApplicationInsightsBackend.ts

@@ -1,5 +1,3 @@
-import $ from 'jquery';
-
 import {
   EchoBackend,
   EchoEventType,
@@ -9,6 +7,8 @@ import {
   PageviewEchoEvent,
 } from '@grafana/runtime';
 
+import { loadScript } from '../../utils';
+
 interface ApplicationInsights {
   trackPageView: () => void;
   trackEvent: (event: { name: string; properties?: Record<string, any> }) => void;
@@ -31,18 +31,15 @@ export class ApplicationInsightsBackend implements EchoBackend<PageviewEchoEvent
   supportedEvents = [EchoEventType.Pageview, EchoEventType.Interaction];
 
   constructor(public options: ApplicationInsightsBackendOptions) {
-    $.ajax({
+    const applicationInsightsOpts = {
-      url: 'https://js.monitor.azure.com/scripts/b/ai.2.min.js',
+      config: {
-      dataType: 'script',
+        connectionString: options.connectionString,
-      cache: true,
+        endpointUrl: options.endpointUrl,
-    }).done(function () {
+      },
-      const applicationInsightsOpts = {
+    };
-        config: {
-          connectionString: options.connectionString,
-          endpointUrl: options.endpointUrl,
-        },
-      };
 
+    const url = 'https://js.monitor.azure.com/scripts/b/ai.2.min.js';
+    loadScript(url).then(() => {
       const init = new (window as any).Microsoft.ApplicationInsights.ApplicationInsights(applicationInsightsOpts);
       (window as any).applicationInsights = init.loadAppInsights();
     });

public/app/core/services/echo/backends/analytics/GA4Backend.ts

@@ -1,9 +1,7 @@
-import $ from 'jquery';
-
 import { CurrentUserDTO } from '@grafana/data';
 import { EchoBackend, EchoEventType, PageviewEchoEvent } from '@grafana/runtime';
 
-import { getUserIdentifier } from '../../utils';
+import { getUserIdentifier, loadScript } from '../../utils';
 
 declare global {
   interface Window {
@@ -22,12 +20,7 @@ export class GA4EchoBackend implements EchoBackend<PageviewEchoEvent, GA4EchoBac
 
   constructor(public options: GA4EchoBackendOptions) {
     const url = `https://www.googletagmanager.com/gtag/js?id=${options.googleAnalyticsId}`;
-
+    loadScript(url);
-    $.ajax({
-      url,
-      dataType: 'script',
-      cache: true,
-    });
 
     window.dataLayer = window.dataLayer || [];
     window.gtag = function gtag() {

public/app/core/services/echo/backends/analytics/GABackend.ts

@@ -1,7 +1,7 @@
-import $ from 'jquery';
-
 import { EchoBackend, EchoEventType, PageviewEchoEvent } from '@grafana/runtime';
 
+import { loadScript } from '../../utils';
+
 export interface GAEchoBackendOptions {
   googleAnalyticsId: string;
   debug?: boolean;
@@ -13,12 +13,7 @@ export class GAEchoBackend implements EchoBackend<PageviewEchoEvent, GAEchoBacke
 
   constructor(public options: GAEchoBackendOptions) {
     const url = `https://www.google-analytics.com/analytics${options.debug ? '_debug' : ''}.js`;
-
+    loadScript(url);
-    $.ajax({
-      url,
-      dataType: 'script',
-      cache: true,
-    });
 
     const ga = (window.ga =
       window.ga ||

public/app/core/services/echo/backends/analytics/RudderstackBackend.ts

@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import type { identify, load, page, track } from 'rudder-sdk-js'; // SDK is loaded dynamically from config, so we only import types from the SDK package
 
 import { CurrentUserDTO } from '@grafana/data';
@@ -11,7 +10,7 @@ import {
   PageviewEchoEvent,
 } from '@grafana/runtime';
 
-import { getUserIdentifier } from '../../utils';
+import { getUserIdentifier, loadScript } from '../../utils';
 
 interface Rudderstack {
   identify: typeof identify;
@@ -41,12 +40,7 @@ export class RudderstackBackend implements EchoBackend<PageviewEchoEvent, Rudder
 
   constructor(public options: RudderstackBackendOptions) {
     const url = options.sdkUrl || `https://cdn.rudderlabs.com/v1/rudder-analytics.min.js`;
-
+    loadScript(url);
-    $.ajax({
-      url,
-      dataType: 'script',
-      cache: true,
-    });
 
     const tempRudderstack = ((window as any).rudderanalytics = []);
 

public/app/core/services/echo/utils.ts

@@ -14,6 +14,15 @@ export function getUserIdentifier(user: CurrentUserDTO) {
   return user.email;
 }
 
+export function loadScript(url: string) {
+  return new Promise((resolve) => {
+    const script = document.createElement('script');
+    script.onload = resolve;
+    script.src = url;
+    document.head.appendChild(script);
+  });
+}
+
 /** @internal */
 export const echoLogger = createLogger('EchoSrv');
 export const echoLog = echoLogger.logger;