New Logs Panel: More analytics (#110149)

* LogLineDetailsDisplayedFields: report fields reorganization

* LogLineDetailsTrace: analytics

* Prettier

* Rename interactions key

public/app/features/logs/components/panel/LogLineDetailsDisplayedFields.tsx

@@ -10,12 +10,13 @@ import { LOG_LINE_BODY_FIELD_NAME } from '../LogDetailsBody';
 
 import { LogLineDetailsMode } from './LogLineDetails';
 import { useLogListContext } from './LogListContext';
+import { reportInteractionOnce } from './analytics';
 
 export const LogLineDetailsDisplayedFields = () => {
   const { displayedFields, setDisplayedFields } = useLogListContext();
 
   const reorganizeDisplayedFields = useCallback(
-    (srcIndex: number, destIndex: number) => {
+    (srcIndex: number, destIndex: number, mode: 'drag' | 'button') => {
       const newDisplayedFields = [...displayedFields];
       const element = displayedFields[srcIndex];
 
@@ -23,6 +24,11 @@ export const LogLineDetailsDisplayedFields = () => {
       newDisplayedFields.splice(destIndex, 0, element);
 
       setDisplayedFields?.(newDisplayedFields);
+
+      reportInteractionOnce('logs_log_line_details_organized_fields', {
+        quantity: newDisplayedFields.length,
+        mode,
+      });
     },
     [displayedFields, setDisplayedFields]
   );
@@ -32,7 +38,7 @@ export const LogLineDetailsDisplayedFields = () => {
       if (result.destination == null) {
         return;
       }
-      reorganizeDisplayedFields(result.source.index, result.destination.index);
+      reorganizeDisplayedFields(result.source.index, result.destination.index, 'drag');
     },
     [reorganizeDisplayedFields]
   );
@@ -65,7 +71,7 @@ export const LogLineDetailsDisplayedFields = () => {
 interface DraggableDisplayedFieldProps {
   field: string;
   index: number;
-  moveField: (srcIndex: number, destIndex: number) => void;
+  moveField: (srcIndex: number, destIndex: number, mode: 'drag' | 'button') => void;
 }
 
 const DraggableDisplayedField = ({ field, index, moveField }: DraggableDisplayedFieldProps) => {
@@ -99,12 +105,12 @@ const DisplayedField = ({
             <>
               <IconButton
                 name="arrow-down"
-                onClick={() => moveField(index, nextIndex)}
+                onClick={() => moveField(index, nextIndex, 'button')}
                 tooltip={t('logs.log-line-details.move-displayed-field-down', 'Move down')}
               />
               <IconButton
                 name="arrow-up"
-                onClick={() => moveField(index, prevIndex)}
+                onClick={() => moveField(index, prevIndex, 'button')}
                 tooltip={t('logs.log-line-details.move-displayed-field-up', 'Move up')}
               />
             </>

public/app/features/logs/components/panel/LogLineDetailsTrace.tsx

@@ -4,7 +4,7 @@ import { isObservable, lastValueFrom } from 'rxjs';
 
 import { DataFrame, DataQueryRequest, DataSourceApi, GrafanaTheme2, TimeRange } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { getDataSourceSrv } from '@grafana/runtime';
+import { getDataSourceSrv, reportInteraction } from '@grafana/runtime';
 import { Icon, Spinner, Tooltip, useStyles2 } from '@grafana/ui';
 import { TraceView } from 'app/features/explore/TraceView/TraceView';
 import { transformDataFrames } from 'app/features/explore/TraceView/utils/transform';
@@ -76,6 +76,14 @@ export const LogLineDetailsTrace = ({ timeRange, timeZone, traceRef }: Props) =>
 
   const traceProp = useMemo(() => (dataFrames?.length ? transformDataFrames(dataFrames[0]) : undefined), [dataFrames]);
 
+  useEffect(() => {
+    if (dataSource && Array.isArray(dataFrames) && traceProp) {
+      reportInteraction('logs_log_line_details_trace_displayed');
+    } else if (dataFrames === null) {
+      reportInteraction('logs_log_line_details_trace_display_failed');
+    }
+  }, [dataFrames, dataSource, traceProp]);
+
   return (
     <div>
       {dataSource && Array.isArray(dataFrames) && traceProp && (

public/app/features/logs/components/panel/LogListContext.tsx

@@ -24,7 +24,7 @@ import {
   store,
 } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { config, getDataSourceSrv, reportInteraction } from '@grafana/runtime';
+import { config, getDataSourceSrv } from '@grafana/runtime';
 import { PopoverContent } from '@grafana/ui';
 
 import { checkLogsError, checkLogsSampled, downloadLogs as download, DownloadFormat } from '../../utils';
@@ -34,6 +34,7 @@ import { LogLineTimestampResolution } from './LogLine';
 import { LogLineDetailsMode } from './LogLineDetails';
 import { GetRowContextQueryFn, LogLineMenuCustomItem } from './LogLineMenu';
 import { LogListFontSize } from './LogList';
+import { reportInteractionOnce } from './analytics';
 import { LogListModel } from './processing';
 import { getScrollbarWidth, LOG_LIST_CONTROLS_WIDTH, LOG_LIST_MIN_WIDTH } from './virtualization';
 
@@ -710,15 +711,6 @@ export function removeDetailsScrollPosition(log: LogListModel) {
   detailsScrollMap.delete(log.uid);
 }
 
-const reportInteractionOnce = (interactionName: string, properties?: Record<string, unknown>) => {
-  const key = `logs.log-list-context.events.${interactionName}`;
-  if (sessionStorage.getItem(key)) {
-    return;
-  }
-  sessionStorage.setItem(key, '1');
-  reportInteraction(interactionName, properties);
-};
-
 async function handleOpenAssistant(openAssistant: (props: OpenAssistantProps) => void, log: LogListModel) {
   const datasource = await getDataSourceSrv().get(log.datasourceUid);
   const context = [];

public/app/features/logs/components/panel/analytics.ts

@@ -0,0 +1,10 @@
+import { reportInteraction } from '@grafana/runtime';
+
+export const reportInteractionOnce = (interactionName: string, properties?: Record<string, unknown>) => {
+  const key = `logs.interactions.${interactionName}`;
+  if (sessionStorage.getItem(key)) {
+    return;
+  }
+  sessionStorage.setItem(key, '1');
+  reportInteraction(interactionName, properties);
+};