Chore: Add tracking for dashboard load (#70057)

* Chore: Add tracking for dashboard load

* Address review comments

public/app/features/dashboard/state/initDashboard.ts

@@ -26,6 +26,7 @@ import {
 import { createDashboardQueryRunner } from '../../query/state/DashboardQueryRunner/DashboardQueryRunner';
 import { initVariablesTransaction } from '../../variables/state/actions';
 import { getIfExistsLastKey } from '../../variables/state/selectors';
+import { trackDashboardLoaded } from '../utils/tracking';
 
 import { DashboardModel } from './DashboardModel';
 import { PanelModel } from './PanelModel';
@@ -170,6 +171,8 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult<void> {
     // fetch dashboard data
     const dashDTO = await fetchDashboard(args, dispatch, getState);
 
+    const versionBeforeMigration = dashDTO?.dashboard?.version;
+
     // returns null if there was a redirect or error
     if (!dashDTO) {
       return;
@@ -271,6 +274,8 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult<void> {
       })
     );
 
+    trackDashboardLoaded(dashboard, versionBeforeMigration);
+
     // yay we are done
     dispatch(dashboardInitCompleted(dashboard));
   };

public/app/features/dashboard/utils/tracking.test.ts

@@ -0,0 +1,40 @@
+import { getDashboardModel } from 'test/helpers/getDashboardModel';
+
+import * as runtime from '@grafana/runtime';
+
+import { trackDashboardLoaded } from './tracking';
+
+describe('trackDashboardLoaded', () => {
+  it('should report dashboard_loaded interaction with correct parameters', () => {
+    const dashboardJSON = {
+      uid: 'dashboard-123',
+      title: 'Test Dashboard',
+      panels: [
+        { id: 1, type: 'row', repeat: 'dc', gridPos: { x: 0, y: 0, h: 1, w: 24 } },
+        { id: 2, repeat: 'app', repeatDirection: 'h', gridPos: { x: 0, y: 1, h: 2, w: 8 } },
+      ],
+      templating: {
+        list: [
+          { type: 'query', name: 'Query 1' },
+          { type: 'interval', name: 'Interval 1' },
+          { type: 'query', name: 'Query 2' },
+        ],
+      },
+    };
+    const model = getDashboardModel(dashboardJSON);
+    const reportInteractionSpy = jest.spyOn(runtime, 'reportInteraction');
+
+    trackDashboardLoaded(model, 16);
+
+    expect(reportInteractionSpy).toHaveBeenCalledWith('dashboards_init_dashboard_completed', {
+      uid: 'dashboard-123',
+      title: 'Test Dashboard',
+      theme: 'dark',
+      schemaVersion: model.schemaVersion, // This value is based on public/app/features/dashboard/state/DashboardMigrator.ts#L81
+      panels_count: 2,
+      variable_type_query_count: 2,
+      variable_type_interval_count: 1,
+      version_before_migration: 16,
+    });
+  });
+});

public/app/features/dashboard/utils/tracking.ts

@@ -0,0 +1,25 @@
+import { reportInteraction } from '@grafana/runtime';
+
+import { DashboardModel } from '../state';
+
+export function trackDashboardLoaded(dashboard: DashboardModel, versionBeforeMigration?: number) {
+  // Count the different types of variables
+  const variables = dashboard.templating.list
+    .map((v) => v.type)
+    .reduce((r, k) => {
+      r[variableName(k)] = 1 + r[variableName(k)] || 1;
+      return r;
+    }, {});
+
+  reportInteraction('dashboards_init_dashboard_completed', {
+    uid: dashboard.uid,
+    title: dashboard.title,
+    theme: dashboard.style,
+    schemaVersion: dashboard.schemaVersion,
+    version_before_migration: versionBeforeMigration,
+    panels_count: dashboard.panels.length,
+    ...variables,
+  });
+}
+
+const variableName = (type: string) => `variable_type_${type}_count`;