Explore/Logs: Add feature tracking for ad-hoc statistics in log rows (#56681)

* Add feature tracking for ad-hoc statistics in log rows

* Make row prop mandatory in LogDetailsRow.tsx

* Remove optional chaining

* fix: failing test by mocking reportInteraction

public/app/features/logs/components/LogDetails.tsx

@@ -109,6 +109,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
                         getStats={() => calculateLogsLabelStats(getRows(), key)}
                         onClickFilterOutLabel={onClickFilterOutLabel}
                         onClickFilterLabel={onClickFilterLabel}
+                        row={row}
                       />
                     );
                   })}
@@ -146,6 +147,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
                       }
                       showDetectedFields={showDetectedFields}
                       wrapLogMessage={wrapLogMessage}
+                      row={row}
                     />
                   );
                 })}

public/app/features/logs/components/LogDetailsRow.test.tsx

@@ -2,6 +2,8 @@ import { screen, render, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { ComponentProps } from 'react';
 
+import { LogRowModel } from '@grafana/data';
+
 import { LogDetailsRow } from './LogDetailsRow';
 
 type Props = ComponentProps<typeof LogDetailsRow>;
@@ -18,6 +20,7 @@ const setup = (propOverrides?: Partial<Props>) => {
     onClickShowDetectedField: () => {},
     onClickHideDetectedField: () => {},
     showDetectedFields: [],
+    row: {} as LogRowModel,
   };
 
   Object.assign(props, propOverrides);
@@ -31,6 +34,11 @@ const setup = (propOverrides?: Partial<Props>) => {
   );
 };
 
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  reportInteraction: jest.fn(),
+}));
+
 describe('LogDetailsRow', () => {
   it('should render parsed key', () => {
     setup({ parsedKey: 'test key' });

public/app/features/logs/components/LogDetailsRow.tsx

@@ -1,7 +1,8 @@
 import { css, cx } from '@emotion/css';
 import React, { PureComponent } from 'react';
 
-import { Field, LinkModel, LogLabelStatsModel, GrafanaTheme2 } from '@grafana/data';
+import { Field, LinkModel, LogLabelStatsModel, GrafanaTheme2, LogRowModel } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime';
 import { withTheme2, Themeable2, ClipboardButton, DataLinkButton, IconButton } from '@grafana/ui';
 
 import { LogLabelStats } from './LogLabelStats';
@@ -21,6 +22,7 @@ export interface Props extends Themeable2 {
   showDetectedFields?: string[];
   onClickShowDetectedField?: (key: string) => void;
   onClickHideDetectedField?: (key: string) => void;
+  row: LogRowModel;
 }
 
 interface State {
@@ -108,6 +110,13 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
       this.setState({ fieldStats, fieldCount });
     }
     this.toggleFieldsStats();
+
+    reportInteraction('grafana_explore_logs_log_details_stats_clicked', {
+      dataSourceType: this.props.row.datasourceType,
+      fieldType: this.props.isLabel ? 'label' : 'detectedField',
+      type: showFieldsStats ? 'close' : 'open',
+      logRowUid: this.props.row.uid,
+    });
   };
 
   toggleFieldsStats() {