Datasources: Add more optional UI tracking (#62785)

* chore: add more optional UI tracking for datasources

* tests: fix the tests by wrapping them in a router

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(
     <Provider store={store}>
-      <DataSourcesListView
-        dataSources={getMockDataSources(3)}
-        dataSourcesCount={3}
-        isLoading={false}
-        hasCreateRights={true}
-        hasWriteRights={true}
-        hasExploreRights={true}
-      />
+      <Router history={locationService.getHistory()}>
+        <DataSourcesListView
+          dataSources={getMockDataSources(3)}
+          dataSourcesCount={3}
+          isLoading={false}
+          hasCreateRights={true}
+          hasWriteRights={true}
+          hasExploreRights={true}
+        />
+      </Router>
     </Provider>
   );
 };

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 <PageLoader />;
@@ -100,14 +103,25 @@ export function DataSourcesListView({
                   ]}
                 </Card.Meta>
                 <Card.Tags>
+                  {/* Build Dashboard */}
                   <LinkButton
                     icon="apps"
                     fill="outline"
                     variant="secondary"
                     href={`dashboard/new-with-ds/${dataSource.uid}`}
+                    onClick={() => {
+                      trackCreateDashboardClicked({
+                        grafana_version: config.buildInfo.version,
+                        datasource_uid: dataSource.uid,
+                        plugin_name: dataSource.typeName,
+                        path: location.pathname,
+                      });
+                    }}
                   >
                     Build a dashboard
                   </LinkButton>
+
+                  {/* Explore */}
                   {hasExploreRights && (
                     <LinkButton
                       icon="compass"
@@ -115,6 +129,14 @@ export function DataSourcesListView({
                       variant="secondary"
                       className={styles.button}
                       href={constructDataSourceExploreUrl(dataSource)}
+                      onClick={() => {
+                        trackExploreClicked({
+                          grafana_version: config.buildInfo.version,
+                          datasource_uid: dataSource.uid,
+                          plugin_name: dataSource.typeName,
+                          path: location.pathname,
+                        });
+                      }}
                     >
                       Explore
                     </LinkButton>

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