Fixed all outliers for automatic click events

abhi-agg · abhi-agg · commit bc18a42b905b · 2024-03-04T21:56:55.000+01:00
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@mozilla-protocol/core": "^16.0.1",
-    "@mozilla/glean": "file:../mozilla-glean-4.0.0.tgz",
+    "@mozilla/glean": "^4.0.0",
     "firebase": "^9.23.0",
     "moment": "^2.30.1",
     "plotly.js": "^2.29.0",
diff --git a/src/components/Breadcrumbs.js b/src/components/Breadcrumbs.js
@@ -7,7 +7,6 @@
 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';
@@ -18,7 +17,6 @@ const Breadcrumbs = () => {
   return (
     <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
@@ -56,7 +54,7 @@ const Breadcrumbs = () => {
           <React.Fragment key={key}>
             {currentKey && <span className='m-2'>/</span>}
             <Link key={key} to={breadcrumb.key}>
-              <span className='breadcrumb-font'>{displayElement}</span>
+              <span className='breadcrumb-font' data-glean-label='Breadcrumbs'>{displayElement}</span>
             </Link>
           </React.Fragment>
         );
diff --git a/src/components/Icons/BugIcon.js b/src/components/Icons/BugIcon.js
@@ -15,8 +15,9 @@ const BugIcon = () => {
       fill='currentColor'
       className='bi bi-bug'
       viewBox='0 0 16 16'
+      data-glean-label='Bug'
     >
-      <path d='M4.355.522a.5.5 0 0 1 .623.333l.291.956A4.979 4.979 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A4.985 4.985 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623zM4 7v4a4 4 0 0 0 3.5 3.97V7H4zm4.5 0v7.97A4 4 0 0 0 12 11V7H8.5zM12 6a3.989 3.989 0 0 0-1.334-2.982A3.983 3.983 0 0 0 8 2a3.983 3.983 0 0 0-2.667 1.018A3.989 3.989 0 0 0 4 6h8z' />
+      <path d='M4.355.522a.5.5 0 0 1 .623.333l.291.956A4.979 4.979 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A4.985 4.985 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623zM4 7v4a4 4 0 0 0 3.5 3.97V7H4zm4.5 0v7.97A4 4 0 0 0 12 11V7H8.5zM12 6a3.989 3.989 0 0 0-1.334-2.982A3.983 3.983 0 0 0 8 2a3.983 3.983 0 0 0-2.667 1.018A3.989 3.989 0 0 0 4 6h8z' data-glean-label='Bug'/>
     </svg>
   );
 };
diff --git a/src/components/Icons/HelpIcon.js b/src/components/Icons/HelpIcon.js
@@ -15,9 +15,10 @@ const HelpIcon = () => {
       fill='currentColor'
       className='bi bi-question-circle'
       viewBox='0 0 16 16'
+      data-glean-label='Help'
     >
-      <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z' />
-      <path d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z' />
+      <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z' data-glean-label='Help'/>
+      <path d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z' data-glean-label='Help'/>
     </svg>
   );
 };
diff --git a/src/components/Icons/MoonIcon.js b/src/components/Icons/MoonIcon.js
@@ -8,10 +8,11 @@ import React from 'react';
 
 const MoonIcon = () => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' width='1.75em' height='1.75em' viewBox='0 0 50 50'>
+    <svg xmlns='http://www.w3.org/2000/svg' width='1.75em' height='1.75em' viewBox='0 0 50 50' data-glean-label='Moon Theme'>
       <path
         d='M 43.81 29.354 C 43.688 28.958 43.413 28.626 43.046 28.432 C 42.679 28.238 42.251 28.198 41.854 28.321 C 36.161 29.886 30.067 28.272 25.894 24.096 C 21.722 19.92 20.113 13.824 21.683 8.133 C 21.848 7.582 21.697 6.985 21.29 6.578 C 20.884 6.172 20.287 6.022 19.736 6.187 C 10.659 8.728 4.691 17.389 5.55 26.776 C 6.408 36.163 13.847 43.598 23.235 44.451 C 32.622 45.304 41.28 39.332 43.816 30.253 C 43.902 29.96 43.9 29.647 43.81 29.354 Z'
         fill='currentColor'
+        data-glean-label='Moon Theme'
       />
     </svg>
   );
diff --git a/src/components/Icons/SignOut.js b/src/components/Icons/SignOut.js
@@ -15,14 +15,17 @@ const SignOutIcon = () => {
       fill='currentColor'
       className='bi bi-box-arrow-right'
       viewBox='0 0 16 16'
+      data-glean-label='Sign out'
     >
       <path
         fillRule='evenodd'
         d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z'
+        data-glean-label='Sign out'
       />
       <path
         fillRule='evenodd'
         d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'
+        data-glean-label='Sign out'
       />
     </svg>
   );
diff --git a/src/components/Icons/SunIcon.js b/src/components/Icons/SunIcon.js
@@ -14,8 +14,9 @@ const SunIcon = () => {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      data-glean-label='Sun Theme'
     >
-      <circle cx='11.9998' cy='11.9998' r='5.75375' fill='currentColor' />
+      <circle cx='11.9998' cy='11.9998' r='5.75375' fill='currentColor' data-glean-label='Sun Theme'/>
       <g>
         <circle
           cx='3.08982'
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -7,7 +7,6 @@
 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';
 
@@ -33,9 +32,8 @@ const NavBar = ({ authenticated, theme, themeToggler }) => {
             >
               <div></div>
               <div className='navbar-nav' role='presentation'>
-                <div className='nav-item nav-link cursor-pointer' data-glean-label='Theme' onClick={() => {
+                <div className='nav-item nav-link cursor-pointer' onClick={() => {
                     recordClick('Theme');
-                    //GleanMetrics.recordElementClick({'label': 'Theme'});
                   }}>
                   <ThemeToggle theme={theme} toggleTheme={themeToggler} />
                 </div>
@@ -45,30 +43,25 @@ const NavBar = ({ authenticated, theme, themeToggler }) => {
                     target='_blank'
                     rel='noopener noreferrer'
                     style={{ all: 'unset ' }}
-                    data-glean-label='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' }} data-glean-label='Help' onClick={() => {
+                  <Link to={`/help`} style={{ all: 'unset' }} onClick={() => {
                     recordClick('Help');
-                    //GleanMetrics.recordElementClick({'label': 'Help'});
                   }}>
                     <HelpIcon />
                   </Link>
                 </div>
                 <div
                   className='nav-item nav-link cursor-pointer'
                   type='btn btn-lg '
-                  data-glean-label='Sign out'
                   onClick={() => {
                     recordClick('Sign out');
-                    //GleanMetrics.recordElementClick({'label': 'Sign out'});
                     auth.signOut();
                   }}
                 >
diff --git a/src/components/ReadMore.js b/src/components/ReadMore.js
@@ -6,7 +6,6 @@
 
 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 }) => {
@@ -27,7 +26,6 @@ const ReadMore = ({ numberOfLines = 3, text }) => {
     <div className='cursor-pointer' onClick={
       () => {
         recordClick('Expand payload');
-        GleanMetrics.recordElementClick({'label': 'Expand payload'});
         setShow((prev) => !prev)}}
     >
       <span
@@ -38,6 +36,7 @@ const ReadMore = ({ numberOfLines = 3, text }) => {
           display: '-webkit-box',
           WebkitBoxOrient: 'vertical'
         }}
+        data-glean-label='Expand payload'
       >
         {formattedText}
       </span>
diff --git a/src/lib/telemetry.js b/src/lib/telemetry.js
@@ -20,7 +20,7 @@ function isTelemetryEnabled() {
   // If the app environment is not defined (likely because of local development),
   // then don't collect any data.
   if (typeof(process.env.REACT_APP_ENV) === "undefined") {
-    return true;
+    return false;
   }
 
   return navigator.doNotTrack !== '1';

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ function isTelemetryEnabled() {`
`20`	`20`	`// If the app environment is not defined (likely because of local development),`
`21`	`21`	`// then don't collect any data.`
`22`	`22`	`if (typeof(process.env.REACT_APP_ENV) === "undefined") {`
`23`		`- return true;`
	`23`	`+ return false;`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`return navigator.doNotTrack !== '1';`