Analytics: Instrument Azure Application Insights (#38553)

* add backend

* read config and pass to backend

* update config docs

* change var name

* use connection string instead of instrumentation key

* add config for endpoint url. update docs

* update default ini

* add spaces

* remove space

* Update docs/sources/administration/configuration.md

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

* Update conf/defaults.ini

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

* Update conf/defaults.ini

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

conf/defaults.ini

@@ -208,6 +208,12 @@ rudderstack_write_key =
 # Rudderstack data plane url, enabled only if rudderstack_write_key is also set
 rudderstack_data_plane_url =
 
+# Application Insights connection string. Specify an URL string to enable this feature.
+application_insights_connection_string =
+
+# Optional. Specifies an Application Insights endpoint URL where the endpoint string is wrapped in backticks ``. 
+application_insights_endpoint_url =
+
 #################################### Security ############################
 [security]
 # disable creation of admin user on first start of grafana

docs/sources/administration/configuration.md

@@ -468,6 +468,13 @@ Analytics ID here. By default this feature is disabled.
 
 Google Tag Manager ID, only enabled if you enter an ID here.
 
+### application_insights_connection_string
+
+If you want to track Grafana usage via Azure Application Insights, then specify _your_ Application Insights connection string. Since the connection string contains semicolons, you need to wrap it in backticks (`). By default, tracking usage is disabled.
+		
+### application_insights_endpoint_url
+		Optionally, use this option to override the default endpoint address for Application Insights data collecting. For details,  refer to the [Azure documentation](https://docs.microsoft.com/en-us/azure/azure-monitor/app/custom-endpoints?tabs=js).
+
 <hr />
 
 ## [security]

packages/grafana-runtime/src/config.ts

@@ -94,6 +94,8 @@ export class GrafanaBootConfig implements GrafanaConfig {
   };
   geomapDefaultBaseLayerConfig?: MapLayerOptions;
   geomapDisableCustomBaseLayer?: boolean;
+  applicationInsightsConnectionString?: string;
+  applicationInsightsEndpointUrl?: string;
 
   constructor(options: GrafanaBootConfig) {
     const mode = options.bootData.user.lightTheme ? 'light' : 'dark';

pkg/api/frontendsettings.go

@@ -218,6 +218,8 @@ func (hs *HTTPServer) getFrontendSettingsMap(c *models.ReqContext) (map[string]i
 		"googleAnalyticsId":                   setting.GoogleAnalyticsId,
 		"rudderstackWriteKey":                 setting.RudderstackWriteKey,
 		"rudderstackDataPlaneUrl":             setting.RudderstackDataPlaneUrl,
+		"applicationInsightsConnectionString": hs.Cfg.ApplicationInsightsConnectionString,
+		"applicationInsightsEndpointUrl":      hs.Cfg.ApplicationInsightsEndpointUrl,
 		"disableLoginForm":                    setting.DisableLoginForm,
 		"disableUserSignUp":                   !setting.AllowUserSignUp,
 		"loginHint":                           setting.LoginHint,

pkg/setting/setting.go

@@ -372,6 +372,8 @@ type Cfg struct {
 	CheckForUpdates                     bool
 	ReportingDistributor                string
 	ReportingEnabled                    bool
+	ApplicationInsightsConnectionString string
+	ApplicationInsightsEndpointUrl      string
 
 	// LDAP
 	LDAPEnabled     bool
@@ -908,6 +910,8 @@ func (cfg *Cfg) Load(args CommandLineArgs) error {
 	if len(cfg.ReportingDistributor) >= 100 {
 		cfg.ReportingDistributor = cfg.ReportingDistributor[:100]
 	}
+	cfg.ApplicationInsightsConnectionString = analytics.Key("application_insights_connection_string").String()
+	cfg.ApplicationInsightsEndpointUrl = analytics.Key("application_insights_endpoint_url").String()
 
 	if err := readAlertingSettings(iniFile); err != nil {
 		return err

public/app/app.ts

@@ -48,6 +48,7 @@ import { getVariablesUrlParams } from './features/variables/getAllVariableValues
 import getDefaultMonacoLanguages from '../lib/monaco-languages';
 import { contextSrv } from './core/services/context_srv';
 import { GAEchoBackend } from './core/services/echo/backends/analytics/GABackend';
+import { ApplicationInsightsBackend } from './core/services/echo/backends/analytics/ApplicationInsightsBackend';
 import { RudderstackBackend } from './core/services/echo/backends/analytics/RudderstackBackend';
 import { getAllOptionEditors } from './core/components/editors/registry';
 
@@ -182,6 +183,15 @@ function initEchoSrv() {
       })
     );
   }
+
+  if (config.applicationInsightsConnectionString) {
+    registerEchoBackend(
+      new ApplicationInsightsBackend({
+        connectionString: config.applicationInsightsConnectionString,
+        endpointUrl: config.applicationInsightsEndpointUrl,
+      })
+    );
+  }
 }
 
 function addClassIfNoOverlayScrollbar() {

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

@@ -0,0 +1,48 @@
+import $ from 'jquery';
+import { EchoBackend, EchoEventType, isInteractionEvent, isPageviewEvent, PageviewEchoEvent } from '@grafana/runtime';
+
+export interface ApplicationInsightsBackendOptions {
+  connectionString: string;
+  endpointUrl?: string;
+}
+
+export class ApplicationInsightsBackend implements EchoBackend<PageviewEchoEvent, ApplicationInsightsBackendOptions> {
+  supportedEvents = [EchoEventType.Pageview];
+
+  constructor(public options: ApplicationInsightsBackendOptions) {
+    $.ajax({
+      url: 'https://js.monitor.azure.com/scripts/b/ai.2.min.js',
+      dataType: 'script',
+      cache: true,
+    }).done(function () {
+      var applicationInsightsOpts = {
+        config: {
+          connectionString: options.connectionString,
+          endpointUrl: options.endpointUrl,
+        },
+      };
+      var init = new (window as any).Microsoft.ApplicationInsights.ApplicationInsights(applicationInsightsOpts);
+      (window as any).applicationInsights = init.loadAppInsights();
+    });
+  }
+
+  addEvent = (e: PageviewEchoEvent) => {
+    if (!(window as any).applicationInsights) {
+      return;
+    }
+
+    if (isPageviewEvent(e)) {
+      (window as any).applicationInsights.trackPageView();
+    }
+
+    if (isInteractionEvent(e)) {
+      (window as any).applicationInsights.trackPageView({
+        name: e.payload.interactionName,
+        properties: e.payload.properties,
+      });
+    }
+  };
+
+  // Not using Echo buffering, addEvent above sends events to Application Insights as soon as they appear
+  flush = () => {};
+}