Loki: Update feature tracking for label browser (#59295)

* update feature tracking names

* track when label browser is opened

* remove old feature tracking

* report interaction on modal close

* update

* fix type error

* revert changes to modal

* revert changes to modal

* remove close method from report interaction

* remove close type for grafana_loki_log_browser_closed

* nit pick

* add closeType to grafana_loki_label_browser_closed

public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx

@@ -187,7 +187,7 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
   };
 
   onClickRunLogsQuery = () => {
-    reportInteraction('grafana_loki_log_browser_closed', {
+    reportInteraction('grafana_loki_label_browser_closed', {
       app: this.props.app,
       closeType: 'showLogsButton',
     });
@@ -196,7 +196,7 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
   };
 
   onClickRunMetricsQuery = () => {
-    reportInteraction('grafana_loki_log_browser_closed', {
+    reportInteraction('grafana_loki_label_browser_closed', {
       app: this.props.app,
       closeType: 'showLogsRateButton',
     });
@@ -206,10 +206,6 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
   };
 
   onClickClear = () => {
-    reportInteraction('grafana_loki_log_browser_closed', {
-      app: this.props.app,
-      closeType: 'clearButton',
-    });
     this.setState((state) => {
       const labels: SelectableLabel[] = state.labels.map((label) => ({
         ...label,

public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx

@@ -73,6 +73,10 @@ export const LokiQueryEditor = React.memo<LokiQueryEditorProps>((props) => {
   };
 
   const onClickLabelBrowserButton = () => {
+    reportInteraction('grafana_loki_label_browser_opened', {
+      app: app,
+    });
+
     setLabelBrowserVisible((visible) => !visible);
   };
 

public/app/plugins/datasource/loki/components/LokiQueryField.tsx

@@ -4,7 +4,7 @@ import { Plugin, Node } from 'slate';
 import { Editor } from 'slate-react';
 
 import { CoreApp, QueryEditorProps } from '@grafana/data';
-import { config, reportInteraction } from '@grafana/runtime';
+import { config } from '@grafana/runtime';
 import {
   SlatePrism,
   TypeaheadOutput,
@@ -135,20 +135,6 @@ export class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, Lok
     }
   };
 
-  onClickChooserButton = () => {
-    if (!this.state.labelBrowserVisible) {
-      reportInteraction('grafana_loki_log_browser_opened', {
-        app: this.props.app,
-      });
-    } else {
-      reportInteraction('grafana_loki_log_browser_closed', {
-        app: this.props.app,
-        closeType: 'logBrowserButton',
-      });
-    }
-    this.setState((state) => ({ labelBrowserVisible: !state.labelBrowserVisible }));
-  };
-
   onTypeahead = async (typeahead: TypeaheadInput): Promise<TypeaheadOutput> => {
     const { datasource } = this.props;
 

public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
 import { CoreApp } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime';
 import { LoadingPlaceholder, Modal } from '@grafana/ui';
 import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider';
 
@@ -47,8 +48,16 @@ export const LabelBrowserModal = (props: Props) => {
     onClose();
   };
 
+  const reportInteractionAndClose = () => {
+    reportInteraction('grafana_loki_label_browser_closed', {
+      app,
+      closeType: 'modalClose',
+    });
+    onClose();
+  };
+
   return (
-    <Modal isOpen={isOpen} title="Label browser" onDismiss={onClose}>
+    <Modal isOpen={isOpen} title="Label browser" onDismiss={reportInteractionAndClose}>
       {!labelsLoaded && <LoadingPlaceholder text="Loading labels..." />}
       {labelsLoaded && !hasLogLabels && <p>No labels found.</p>}
       {labelsLoaded && hasLogLabels && (