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>
This commit is contained in:
Josh Hunt 2022-10-11 11:11:23 +01:00 committed by GitHub
parent 5641029a4a
commit d52ab5de2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 38 deletions

View File

@ -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({
url: 'https://js.monitor.azure.com/scripts/b/ai.2.min.js',
dataType: 'script',
cache: true,
}).done(function () {
const applicationInsightsOpts = {
config: {
connectionString: options.connectionString,
endpointUrl: options.endpointUrl,
},
};
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();
});

View File

@ -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}`;
$.ajax({
url,
dataType: 'script',
cache: true,
});
loadScript(url);
window.dataLayer = window.dataLayer || [];
window.gtag = function gtag() {

View File

@ -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`;
$.ajax({
url,
dataType: 'script',
cache: true,
});
loadScript(url);
const ga = (window.ga =
window.ga ||

View File

@ -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`;
$.ajax({
url,
dataType: 'script',
cache: true,
});
loadScript(url);
const tempRudderstack = ((window as any).rudderanalytics = []);

View File

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