Record element clicks via Glean provided api

Author: abhi-agg

src/components/ActiveClients.js

@@ -7,6 +7,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { collection, getFirestore, onSnapshot, orderBy, query } from 'firebase/firestore';
+import GleanMetrics from '@mozilla/glean/metrics';
 
 import ReturnToTop from './ReturnToTop';
 import SearchBar from './SearchBar';
@@ -144,13 +145,15 @@ const ActiveClients = () => {
                       to={`/pings/${debugId}`}
                       onClick={() => {
                         recordClick("Debug ID Pings");
+                        GleanMetrics.recordElementClick({'label': 'Debug ID Pings'});
                       }}
                     >
                       Pings
                     </Link>
                     <br />
                     <Link className='text-decoration-none' to={`/stream/${debugId}`} onClick={() => {
                       recordClick("Debug ID Event Stream")
+                      GleanMetrics.recordElementClick({'label': 'Debug ID Event Stream'});
                     }}>
                       Event Stream
                     </Link>

src/components/Breadcrumbs.js

@@ -7,6 +7,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import useBreadcrumbs from 'use-react-router-breadcrumbs';
+import GleanMetrics from '@mozilla/glean/metrics';
 
 import { isUuid } from '../lib/isUuid';
 import { recordClick } from '../lib/telemetry';
@@ -15,7 +16,10 @@ const Breadcrumbs = () => {
   const breadcrumbs = useBreadcrumbs();
 
   return (
-    <div style={{ marginLeft: '0.5rem', paddingLeft: 16, marginBottom: 15 }} onClick={() => {recordClick('Breadcrumbs')}}>
+    <div style={{ marginLeft: '0.5rem', paddingLeft: 16, marginBottom: 15 }} onClick={() => {
+      recordClick('Breadcrumbs');
+      GleanMetrics.recordElementClick({'label': 'Breadcrumbs'});
+      }}>
       {breadcrumbs.map(({ breadcrumb, key, location, match }) => {
         // `/pings` & `/stream` are included in the routes, but they don't have
         // their own pages, so we can hide it from our breadcrumbs.

src/components/DebugTagPings/components/DebugTagPingsComponent.js

@@ -16,6 +16,7 @@ import {
   where
 } from 'firebase/firestore';
 import PropTypes from 'prop-types';
+import GleanMetrics from '@mozilla/glean/metrics';
 
 import Filter from './Filter';
 import ErrorField from './ErrorField';
@@ -43,6 +44,7 @@ const DebugTagPings = ({ debugId }) => {
   // Copies the beautified JSON payload to the clipboard.
   const handleCopyPayload = (key, payload, buttonLabel) => () => {
     recordClick(buttonLabel);
+    GleanMetrics.recordElementClick({'label': buttonLabel});
 
     try {
       const beautifiedJson = JSON.stringify(JSON.parse(payload), undefined, 2);
@@ -221,9 +223,15 @@ const DebugTagPings = ({ debugId }) => {
               </td>
               {!!numberOfErrors && <ErrorField ping={ping} />}
               <td className='actions'>
-                <Link to={`/pings/${debugId}/${ping.key}`} onClick={() => {recordClick('Details')}}>Details</Link>
+                <Link to={`/pings/${debugId}/${ping.key}`} onClick={() => {
+                  recordClick('Details');
+                  GleanMetrics.recordElementClick({'label': 'Details'});
+                }}>Details</Link>
                 <br />
-                <a target='_blank' rel='noopener noreferrer' href={jsonToDataURI(ping.payload)} onClick={() => {recordClick('Raw JSON')}}>
+                <a target='_blank' rel='noopener noreferrer' href={jsonToDataURI(ping.payload)} onClick={() => {
+                  recordClick('Raw JSON');
+                  GleanMetrics.recordElementClick({'label': 'Raw JSON'});
+                  }}>
                   Raw JSON
                 </a>
                 <br />

src/components/DebugTagPings/components/Filter.js

@@ -6,6 +6,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
+import GleanMetrics from '@mozilla/glean/metrics';
 
 import Dropdown from '../../Dropdown';
 import SearchBar from '../../SearchBar';
@@ -51,6 +52,7 @@ const Filter = ({ pings, handleFilter, handleFiltersApplied }) => {
 
   const handleToggleRenderOptions = (buttonLabel) => {
     recordClick(buttonLabel);
+    GleanMetrics.recordElementClick({'label': buttonLabel});
     setShowOptions((prev) => !prev);
   };
 

src/components/NavBar.js

@@ -7,6 +7,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import GleanMetrics from '@mozilla/glean/metrics';
 
 import { auth } from '../Firebase';
 
@@ -32,7 +33,10 @@ const NavBar = ({ authenticated, theme, themeToggler }) => {
             >
               <div></div>
               <div className='navbar-nav' role='presentation'>
-                <div className='nav-item nav-link cursor-pointer' onClick={() => {recordClick('Theme')}}>
+                <div className='nav-item nav-link cursor-pointer' onClick={() => {
+                    recordClick('Theme');
+                    GleanMetrics.recordElementClick({'label': 'Theme'});
+                  }}>
                   <ThemeToggle theme={theme} toggleTheme={themeToggler} />
                 </div>
                 <div className='nav-item nav-link cursor-pointer'>
@@ -41,13 +45,19 @@ const NavBar = ({ authenticated, theme, themeToggler }) => {
                     target='_blank'
                     rel='noopener noreferrer'
                     style={{ all: 'unset ' }}
-                    onClick={() => {recordClick('Bug')}}
+                    onClick={() => {
+                      recordClick('Bug');
+                      GleanMetrics.recordElementClick({'label': 'Bug'});
+                    }}
                   >
                     <BugIcon />
                   </a>
                 </div>
                 <div className='nav-item nav-link cursor-pointer'>
-                  <Link to={`/help`} style={{ all: 'unset' }} onClick={() => {recordClick('Help')}}>
+                  <Link to={`/help`} style={{ all: 'unset' }} onClick={() => {
+                    recordClick('Help');
+                    GleanMetrics.recordElementClick({'label': 'Help'});
+                  }}>
                     <HelpIcon />
                   </Link>
                 </div>
@@ -56,6 +66,7 @@ const NavBar = ({ authenticated, theme, themeToggler }) => {
                   type='btn btn-lg '
                   onClick={() => {
                     recordClick('Sign out');
+                    GleanMetrics.recordElementClick({'label': 'Sign out'});
                     auth.signOut();
                   }}
                 >

src/components/ReadMore.js

@@ -6,6 +6,7 @@
 
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
+import GleanMetrics from '@mozilla/glean/metrics';
 import { recordClick } from '../lib/telemetry';
 
 const ReadMore = ({ numberOfLines = 3, text }) => {
@@ -26,6 +27,7 @@ const ReadMore = ({ numberOfLines = 3, text }) => {
     <div className='cursor-pointer' onClick={
       () => {
         recordClick('Expand payload');
+        GleanMetrics.recordElementClick({'label': 'Expand payload'});
         setShow((prev) => !prev)}}
     >
       <span

src/components/ReturnToTop.js

@@ -5,6 +5,7 @@
  */
 
 import React, { useState } from 'react';
+import GleanMetrics from '@mozilla/glean/metrics';
 import { recordClick } from '../lib/telemetry';
 
 const ReturnToTop = () => {
@@ -26,6 +27,7 @@ const ReturnToTop = () => {
       onClick={() => {
         // record this click event
         recordClick('Back to top');
+        GleanMetrics.recordElementClick({'label': 'Back to top'});
         document.body.scrollTop = 0;
         document.documentElement.scrollTop = 0;
       }}

src/components/ShowRawPing/components/ShowRawPing.js

@@ -10,6 +10,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { doc, getDoc, getFirestore } from 'firebase/firestore';
 import PropTypes from 'prop-types';
+import GleanMetrics from '@mozilla/glean/metrics';
 
 import Events from '../../Events';
 import Loading from '../../Loading';
@@ -162,6 +163,7 @@ const ShowRawPing = ({ docId }) => {
 
   const handleLineNumberClick = (lineNumber) => (e) => {
     recordClick('Line number');
+    GleanMetrics.recordElementClick({'label': 'Line number'});
     lineNumber = `L${lineNumber}`;
 
     let startLine;