From 20616eef8cf7d3ff072daa0c5b1c96e7857ec35e Mon Sep 17 00:00:00 2001
From: Gareth Dawson <gareth.dawson@grafana.com>
Date: Wed, 19 Oct 2022 10:01:45 +0100
Subject: [PATCH] Logs: Add feature to tracking show context button click
 (#57074)

* report interaction on context open

* report interaction on context close_esc

* replace deprecated feature (KeyboardEvent.keyCode)

* update to report interaction on toggle context

* remove redundant if statement
---
 public/app/features/logs/components/LogRow.tsx       |  9 ++++++++-
 .../app/features/logs/components/LogRowContext.tsx   | 12 ++++++------
 .../app/features/logs/components/LogRowMessage.tsx   |  4 ++--
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/public/app/features/logs/components/LogRow.tsx b/public/app/features/logs/components/LogRow.tsx
index e801364a112..6571956acd8 100644
--- a/public/app/features/logs/components/LogRow.tsx
+++ b/public/app/features/logs/components/LogRow.tsx
@@ -96,7 +96,14 @@ class UnThemedLogRow extends PureComponent<Props, State> {
     showDetails: false,
   };
 
-  toggleContext = () => {
+  toggleContext = (method: string) => {
+    const { datasourceType, uid: logRowUid } = this.props.row;
+    reportInteraction('grafana_explore_logs_log_context_clicked', {
+      datasourceType,
+      logRowUid,
+      type: method,
+    });
+
     this.props.toggleContextIsOpen?.();
     this.setState((state) => {
       return {
diff --git a/public/app/features/logs/components/LogRowContext.tsx b/public/app/features/logs/components/LogRowContext.tsx
index c3c5a534e7c..6f96c756dc2 100644
--- a/public/app/features/logs/components/LogRowContext.tsx
+++ b/public/app/features/logs/components/LogRowContext.tsx
@@ -20,7 +20,7 @@ interface LogRowContextProps {
   errors?: LogRowContextQueryErrors;
   hasMoreContextRows?: HasMoreContextRows;
   logsSortOrder?: LogsSortOrder | null;
-  onOutsideClick: () => void;
+  onOutsideClick: (method: string) => void;
   onLoadMoreContext: () => void;
 }
 
@@ -290,21 +290,21 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
 }) => {
   useEffect(() => {
     const handleEscKeyDown = (e: KeyboardEvent): void => {
-      if (e.keyCode === 27) {
-        onOutsideClick();
+      if (e.key === 'Escape' || e.key === 'Esc') {
+        onOutsideClick('close_esc');
       }
     };
     document.addEventListener('keydown', handleEscKeyDown, false);
     return () => {
       document.removeEventListener('keydown', handleEscKeyDown, false);
     };
-  }, [onOutsideClick]);
+  }, [onOutsideClick, row]);
   const { afterContext, beforeContext, title, top, actions, width } = useStyles2((theme) =>
     getLogRowContextStyles(theme, wrapLogMessage)
   );
 
   return (
-    <ClickOutsideWrapper onClick={onOutsideClick}>
+    <ClickOutsideWrapper onClick={() => onOutsideClick('close_outside_click')}>
       {/* e.stopPropagation is necessary so the log details doesn't open when clicked on log line in context
        * and/or when context log line is being highlighted */}
       <div onClick={(e) => e.stopPropagation()}>
@@ -337,7 +337,7 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
         <div className={cx(title, width)}>
           <h5>Log context</h5>
           <div className={actions}>
-            <IconButton size="lg" name="times" onClick={onOutsideClick} />
+            <IconButton size="lg" name="times" onClick={() => onOutsideClick('close_button')} />
           </div>
         </div>
       </div>
diff --git a/public/app/features/logs/components/LogRowMessage.tsx b/public/app/features/logs/components/LogRowMessage.tsx
index 4129c741630..f94c7467d7f 100644
--- a/public/app/features/logs/components/LogRowMessage.tsx
+++ b/public/app/features/logs/components/LogRowMessage.tsx
@@ -27,7 +27,7 @@ interface Props extends Themeable2 {
   scrollElement?: HTMLDivElement;
   showContextToggle?: (row?: LogRowModel) => boolean;
   getRows: () => LogRowModel[];
-  onToggleContext: () => void;
+  onToggleContext: (method: string) => void;
   updateLimit?: () => void;
   logsSortOrder?: LogsSortOrder | null;
 }
@@ -122,7 +122,7 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
 
   onContextToggle = (e: React.SyntheticEvent<HTMLElement>) => {
     e.stopPropagation();
-    this.props.onToggleContext();
+    this.props.onToggleContext('open');
   };
 
   onShowContextClick = (e: React.SyntheticEvent<HTMLElement, Event>) => {