[v10.0.x] Datasources: Extend optional reporting (#70161)

Datasources: Extend  optional reporting (#69061)

* feat: add default properties to the `reportInteraction()`

* chore: add more tracking events to the ds-config page

* refactor: adding the `path` to the `meta` instaed

(cherry picked from commit 6a995d526a)

Co-authored-by: Levente Balogh <balogh.levente.hu@gmail.com>

packages/grafana-runtime/src/services/EchoSrv.ts

@@ -18,6 +18,7 @@ export interface EchoMeta {
   windowSize: SizeMeta;
   userAgent: string;
   url?: string;
+  path?: string;
   /**
    * A unique browser session
    */

public/app/core/services/echo/Echo.ts

@@ -79,6 +79,7 @@ export class Echo implements EchoSrv {
       userAgent: window.navigator.userAgent,
       ts: new Date().getTime(),
       timeSinceNavigationStart: performance.now(),
+      path: window.location.pathname,
       url: window.location.href,
     };
   };

public/app/features/datasources/components/EditDataSource.tsx

@@ -24,6 +24,7 @@ import {
   useTestDataSource,
   useUpdateDatasource,
 } from '../state';
+import { trackDsConfigClicked, trackDsConfigUpdated } from '../tracking';
 import { DataSourceRights } from '../types';
 
 import { BasicSettings } from './BasicSettings';
@@ -119,9 +120,13 @@ export function EditDataSourceView({
 
   const onSubmit = async (e: React.MouseEvent<HTMLButtonElement> | React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    trackDsConfigClicked('save_and_test');
+
     try {
       await onUpdate({ ...dataSource });
+      trackDsConfigUpdated('success');
     } catch (err) {
+      trackDsConfigUpdated('fail');
       return;
     }
 
@@ -129,7 +134,15 @@ export function EditDataSourceView({
   };
 
   if (loadError) {
-    return <DataSourceLoadError dataSourceRights={dataSourceRights} onDelete={onDelete} />;
+    return (
+      <DataSourceLoadError
+        dataSourceRights={dataSourceRights}
+        onDelete={() => {
+          trackDsConfigClicked('delete');
+          onDelete();
+        }}
+      />
+    );
   }
 
   if (loading) {
@@ -181,8 +194,14 @@ export function EditDataSourceView({
 
       <ButtonRow
         onSubmit={onSubmit}
-        onTest={onTest}
-        onDelete={onDelete}
+        onDelete={() => {
+          trackDsConfigClicked('delete');
+          onDelete();
+        }}
+        onTest={() => {
+          trackDsConfigClicked('test');
+          onTest();
+        }}
         canDelete={!readOnly && hasDeleteRights}
         canSave={!readOnly && hasWriteRights}
       />

public/app/features/datasources/components/EditDataSourceActions.tsx

@@ -8,7 +8,7 @@ import { contextSrv } from 'app/core/core';
 import { AccessControlAction } from 'app/types';
 
 import { useDataSource } from '../state';
-import { trackCreateDashboardClicked, trackExploreClicked } from '../tracking';
+import { trackCreateDashboardClicked, trackDsConfigClicked, trackExploreClicked } from '../tracking';
 import { constructDataSourceExploreUrl } from '../utils';
 
 const getStyles = (theme: GrafanaTheme2) => {
@@ -36,6 +36,7 @@ export function EditDataSourceActions({ uid }: Props) {
         variant="secondary"
         href={`dashboard/new-with-ds/${dataSource.uid}`}
         onClick={() => {
+          trackDsConfigClicked('build_a_dashboard');
           trackCreateDashboardClicked({
             grafana_version: config.buildInfo.version,
             datasource_uid: dataSource.uid,
@@ -55,6 +56,7 @@ export function EditDataSourceActions({ uid }: Props) {
           className={styles.button}
           href={constructDataSourceExploreUrl(dataSource)}
           onClick={() => {
+            trackDsConfigClicked('explore');
             trackExploreClicked({
               grafana_version: config.buildInfo.version,
               datasource_uid: dataSource.uid,

public/app/features/datasources/tracking.ts

@@ -78,3 +78,11 @@ export const trackCreateDashboardClicked = (props: DataSourceGeneralTrackingProp
 export const trackDataSourcesListViewed = (props: { grafana_version?: string; path?: string }) => {
   reportInteraction('grafana_ds_datasources_list_viewed', props);
 };
+
+export const trackDsConfigClicked = (item: string) => {
+  reportInteraction('connections_datasources_settings_clicked', { item });
+};
+
+export const trackDsConfigUpdated = (item: string) => {
+  reportInteraction('connections_datasources_ds_configured', { item });
+};