From db369fc5b258c8991304c02cc0e1213d2f5b0d16 Mon Sep 17 00:00:00 2001
From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
Date: Thu, 5 Jan 2023 12:52:59 -0600
Subject: [PATCH] Prometheus: instant results ux improvements rudderstack
 events (#60990)

* add rudderstack events for new interactive elements
---
 .../explore/PrometheusListView/RawListContainer.tsx    |  5 +++++
 .../explore/PrometheusListView/RawListItem.tsx         | 10 +++++++++-
 public/app/features/explore/RawPrometheusContainer.tsx | 10 ++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/public/app/features/explore/PrometheusListView/RawListContainer.tsx b/public/app/features/explore/PrometheusListView/RawListContainer.tsx
index ecd9bb4f582..08d1c0e0331 100644
--- a/public/app/features/explore/PrometheusListView/RawListContainer.tsx
+++ b/public/app/features/explore/PrometheusListView/RawListContainer.tsx
@@ -5,6 +5,7 @@ import { useWindowSize } from 'react-use';
 import { VariableSizeList as List } from 'react-window';
 
 import { DataFrame, Field as DataFrameField } from '@grafana/data/';
+import { reportInteraction } from '@grafana/runtime/src';
 import { Field, Switch } from '@grafana/ui/';
 
 import {
@@ -73,6 +74,10 @@ const RawListContainer = (props: RawListContainerProps) => {
 
   const onContentClick = () => {
     setIsExpandedView(!isExpandedView);
+    const props = {
+      isExpanded: !isExpandedView,
+    };
+    reportInteraction('grafana_explore_prometheus_instant_query_ui_raw_toggle_expand', props);
   };
 
   useEffect(() => {
diff --git a/public/app/features/explore/PrometheusListView/RawListItem.tsx b/public/app/features/explore/PrometheusListView/RawListItem.tsx
index 15e6b082be8..42d3337423b 100644
--- a/public/app/features/explore/PrometheusListView/RawListItem.tsx
+++ b/public/app/features/explore/PrometheusListView/RawListItem.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 import { Field, GrafanaTheme2 } from '@grafana/data/';
+import { reportInteraction } from '@grafana/runtime/src';
 import { IconButton, useStyles2 } from '@grafana/ui/';
 
 import { ItemLabels } from './ItemLabels';
@@ -128,7 +129,14 @@ const RawListItem = ({ listItemData, listKey, totalNumberOfValues, valueLabels,
       )}
       <div key={listKey} className={styles.rowWrapper}>
         <span className={styles.copyToClipboardWrapper}>
-          <IconButton tooltip="Copy to clipboard" onClick={() => copyToClipboard(stringRep)} name="copy" />
+          <IconButton
+            tooltip="Copy to clipboard"
+            onClick={() => {
+              reportInteraction('grafana_explore_prometheus_instant_query_ui_raw_toggle_expand');
+              copyToClipboard(stringRep);
+            }}
+            name="copy"
+          />
         </span>
         <span role={'cell'} className={styles.rowLabelWrapWrap}>
           <div className={styles.rowLabelWrap}>
diff --git a/public/app/features/explore/RawPrometheusContainer.tsx b/public/app/features/explore/RawPrometheusContainer.tsx
index 27cc9721c1b..905b6ca9405 100644
--- a/public/app/features/explore/RawPrometheusContainer.tsx
+++ b/public/app/features/explore/RawPrometheusContainer.tsx
@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { applyFieldOverrides, DataFrame, SelectableValue, SplitOpen, TimeZone, ValueLinkConfig } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime/src';
 import { Collapse, RadioButtonGroup, Table } from '@grafana/ui';
 import { FilterItem } from '@grafana/ui/src/components/Table/types';
 import { config } from 'app/core/config';
@@ -90,6 +91,15 @@ export class RawPrometheusContainer extends PureComponent<Props, PrometheusConta
       <div className={spacing}>
         {this.state.resultsStyle === TABLE_RESULTS_STYLE.raw ? 'Raw' : 'Table'}
         <RadioButtonGroup
+          onClick={() => {
+            const props = {
+              state:
+                this.state.resultsStyle === TABLE_RESULTS_STYLE.table
+                  ? TABLE_RESULTS_STYLE.raw
+                  : TABLE_RESULTS_STYLE.table,
+            };
+            reportInteraction('grafana_explore_prometheus_instant_query_ui_toggle_clicked', props);
+          }}
           size="sm"
           options={ALL_GRAPH_STYLE_OPTIONS}
           value={this.state?.resultsStyle}