diff --git a/public/app/features/datasources/components/DataSourcesList.test.tsx b/public/app/features/datasources/components/DataSourcesList.test.tsx
index 79ecf990151..06659449116 100644
--- a/public/app/features/datasources/components/DataSourcesList.test.tsx
+++ b/public/app/features/datasources/components/DataSourcesList.test.tsx
@@ -1,7 +1,9 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import { locationService } from '@grafana/runtime';
import { configureStore } from 'app/store/configureStore';
import { getMockDataSources } from '../__mocks__';
@@ -13,14 +15,16 @@ const setup = () => {
return render(
-
+
+
+
);
};
diff --git a/public/app/features/datasources/components/DataSourcesList.tsx b/public/app/features/datasources/components/DataSourcesList.tsx
index 5ddf8953038..03511258996 100644
--- a/public/app/features/datasources/components/DataSourcesList.tsx
+++ b/public/app/features/datasources/components/DataSourcesList.tsx
@@ -1,5 +1,6 @@
import { css } from '@emotion/css';
import React from 'react';
+import { useLocation } from 'react-router-dom';
import { DataSourceSettings, GrafanaTheme2 } from '@grafana/data';
import { config } from '@grafana/runtime';
@@ -10,6 +11,7 @@ import { contextSrv } from 'app/core/core';
import { StoreState, AccessControlAction, useSelector } from 'app/types';
import { getDataSources, getDataSourcesCount, useDataSourcesRoutes, useLoadDataSources } from '../state';
+import { trackCreateDashboardClicked, trackExploreClicked } from '../tracking';
import { constructDataSourceExploreUrl } from '../utils';
import { DataSourcesListHeader } from './DataSourcesListHeader';
@@ -55,6 +57,7 @@ export function DataSourcesListView({
}: ViewProps) {
const styles = useStyles2(getStyles);
const dataSourcesRoutes = useDataSourcesRoutes();
+ const location = useLocation();
if (isLoading) {
return ;
@@ -100,14 +103,25 @@ export function DataSourcesListView({
]}
+ {/* Build Dashboard */}
{
+ trackCreateDashboardClicked({
+ grafana_version: config.buildInfo.version,
+ datasource_uid: dataSource.uid,
+ plugin_name: dataSource.typeName,
+ path: location.pathname,
+ });
+ }}
>
Build a dashboard
+
+ {/* Explore */}
{hasExploreRights && (
{
+ trackExploreClicked({
+ grafana_version: config.buildInfo.version,
+ datasource_uid: dataSource.uid,
+ plugin_name: dataSource.typeName,
+ path: location.pathname,
+ });
+ }}
>
Explore
diff --git a/public/app/features/datasources/tracking.ts b/public/app/features/datasources/tracking.ts
index 6f5f32a732e..dcc27c2200e 100644
--- a/public/app/features/datasources/tracking.ts
+++ b/public/app/features/datasources/tracking.ts
@@ -56,3 +56,21 @@ type DataSourceTestedProps = {
/** The URL path that points to the page where the event was triggered. We are using this to be able to distinguish between the performance of different datasource edit locations. */
path?: string;
};
+
+type DataSourceGeneralTrackingProps = {
+ grafana_version?: string;
+ /** The unique id of the newly created data source */
+ datasource_uid: string;
+ /** The name of the datasource (e.g. Cloudwatch, Loki, Prometheus) */
+ plugin_name: string;
+ /** The URL of the page where event was triggereed from. */
+ path?: string;
+};
+
+export const trackExploreClicked = (props: DataSourceGeneralTrackingProps) => {
+ reportInteraction('grafana_ds_explore_datasource_clicked', props);
+};
+
+export const trackCreateDashboardClicked = (props: DataSourceGeneralTrackingProps) => {
+ reportInteraction('grafana_ds_explore_datasource_clicked', props);
+};