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); +};