From d19a125adadea5cbf51bcd11cf4d67f9ad4c7556 Mon Sep 17 00:00:00 2001
From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
Date: Wed, 31 Aug 2022 14:43:00 -0500
Subject: [PATCH] Prometheus: report metrics browser toggle click interaction
 (#54546)

* report metrics browser toggle click interaction

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>
---
 .../prometheus/components/PromQueryField.tsx   | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
index 01bf7d1e54f..06961e3ee36 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
@@ -2,15 +2,16 @@ import { LanguageMap, languages as prismLanguages } from 'prismjs';
 import React, { ReactNode } from 'react';
 import { Plugin } from 'slate';
 
-import { QueryEditorProps, QueryHint, isDataFrame, toLegacyResponseData, TimeRange, CoreApp } from '@grafana/data';
+import { CoreApp, isDataFrame, QueryEditorProps, QueryHint, TimeRange, toLegacyResponseData } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime/src';
 import {
-  SlatePrism,
-  TypeaheadInput,
-  TypeaheadOutput,
   BracesPlugin,
   DOMUtil,
-  SuggestionsState,
   Icon,
+  SlatePrism,
+  SuggestionsState,
+  TypeaheadInput,
+  TypeaheadOutput,
 } from '@grafana/ui';
 import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
 import {
@@ -21,7 +22,7 @@ import {
 
 import { PrometheusDatasource } from '../datasource';
 import { roundMsToMin } from '../language_utils';
-import { PromQuery, PromOptions } from '../types';
+import { PromOptions, PromQuery } from '../types';
 
 import { PrometheusMetricsBrowser } from './PrometheusMetricsBrowser';
 import { MonacoQueryFieldWrapper } from './monaco-query-field/MonacoQueryFieldWrapper';
@@ -219,6 +220,11 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
 
   onClickChooserButton = () => {
     this.setState((state) => ({ labelBrowserVisible: !state.labelBrowserVisible }));
+
+    reportInteraction('user_grafana_prometheus_metrics_browser_clicked', {
+      editorMode: this.state.labelBrowserVisible ? 'metricViewClosed' : 'metricViewOpen',
+      app: this.props?.app ?? '',
+    });
   };
 
   onClickHintFix = () => {