feat: first mile events for data collection (#4123)

Author: ChitlangeSahas

src/homepageExperience/components/steps/CreateToken.tsx

@@ -14,9 +14,19 @@ import {getOrg} from 'src/organizations/selectors'
 
 // Helper Components
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+import {event} from 'src/cloud/utils/reporting'
 
 type ReduxProps = ConnectedProps<typeof connector>
 
+// Events log handling
+const logCopyCodeSnippet = () => {
+  event('firstMile.pythonWizard.createToken.code.copied')
+}
+
+const logDocsOpened = () => {
+  event('firstMile.pythonWizard.createToken.docs.opened')
+}
+
 const CreateTokenComponent: FC<ReduxProps & RouteComponentProps> = ({
   showOverlay,
   dismissOverlay,
@@ -50,10 +60,16 @@ const CreateTokenComponent: FC<ReduxProps & RouteComponentProps> = ({
         Save your token as an environment variable; you’ll use it soon. Run this
         command in your terminal:
       </p>
-      <CodeSnippet text="export INFLUXDB_TOKEN=<your token here>" />
+      <CodeSnippet
+        text="export INFLUXDB_TOKEN=<your token here>"
+        onCopy={logCopyCodeSnippet}
+      />
       <p style={{marginTop: '46px'}}>
         You can create tokens in the future in the{' '}
-        <SafeBlankLink href={`orgs/${org.id}/load-data/tokens`}>
+        <SafeBlankLink
+          href={`orgs/${org.id}/load-data/tokens`}
+          onClick={logDocsOpened}
+        >
           Token page
         </SafeBlankLink>
         .

src/homepageExperience/components/steps/ExecuteAggregateQuery.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import CodeSnippet from 'src/shared/components/CodeSnippet'
 
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+import {event} from 'src/cloud/utils/reporting'
 
 const fromBucketSnippet = `from(bucket: “my-bucket”)
   |> range(start: -10m) # find data points in last 10 minutes
@@ -16,27 +17,42 @@ for table in tables:
     for record in table.records:
         print(record)`
 
+const logCopyCodeSnippet = () => {
+  event('firstMile.pythonWizard.executeAggregateQuery.code.copied')
+}
+
+const logDocsOpened = () => {
+  event('firstMile.pythonWizard.executeAggregateQuery.docs.opened')
+}
+
 export const ExecuteAggregateQuery = () => {
   return (
     <>
       <h1>Execute an Aggregate Query</h1>
       <p>
         An{' '}
-        <SafeBlankLink href="https://docs.influxdata.com/flux/v0.x/function-types/#aggregates">
+        <SafeBlankLink
+          href="https://docs.influxdata.com/flux/v0.x/function-types/#aggregates"
+          onClick={logDocsOpened}
+        >
           aggregate
         </SafeBlankLink>{' '}
         function is a powerful method for returning combined, summarized data
         about a set of time-series data.
       </p>
-      <CodeSnippet text={fromBucketSnippet} showCopyControl={false} />
+      <CodeSnippet
+        text={fromBucketSnippet}
+        showCopyControl={false}
+        onCopy={logCopyCodeSnippet}
+      />
       <p>
         In this example, we use the mean() function to calculate the average of
         data points in last 10 minutes.
         <br />
         <br />
         Run the following:
       </p>
-      <CodeSnippet text={codeSnippet} />
+      <CodeSnippet text={codeSnippet} onCopy={logCopyCodeSnippet} />
       <p style={{marginTop: '20px'}}>
         This will return the mean of the five values. ( (0+1+2+3+4) / 5 = 2 )
       </p>

src/homepageExperience/components/steps/ExecuteQuery.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import CodeSnippet from 'src/shared/components/CodeSnippet'
+import {event} from 'src/cloud/utils/reporting'
 
 const fromBucketSnippet = `from(bucket: “my-bucket”)
   |> range(start: -10m)`
@@ -13,6 +14,10 @@ for table in tables:
     for record in table.records:
         print(record)`
 
+const logCopyCodeSnippet = () => {
+  event('firstMile.pythonWizard.executeQuery.code.copied')
+}
+
 export const ExecuteQuery = () => {
   return (
     <>
@@ -25,7 +30,11 @@ export const ExecuteQuery = () => {
         <br />
         Here is what a simple Flux query looks like on its own:
       </p>
-      <CodeSnippet text={fromBucketSnippet} showCopyControl={false} />
+      <CodeSnippet
+        text={fromBucketSnippet}
+        showCopyControl={false}
+        onCopy={logCopyCodeSnippet}
+      />
       <p>
         In this query, we are looking for data points within last 10 minutes
         with field key of “field1”.
@@ -36,7 +45,7 @@ export const ExecuteQuery = () => {
         <br />
         Run the following:
       </p>
-      <CodeSnippet text={query} />
+      <CodeSnippet text={query} onCopy={logCopyCodeSnippet} />
     </>
   )
 }

src/homepageExperience/components/steps/Finish.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import {
   AlignItems,
   ComponentSize,
@@ -8,8 +8,12 @@ import {
   ResourceCard,
 } from '@influxdata/clockface'
 import {InfluxDBUniversityIcon, VSCodePluginIcon} from '../HomepageIcons'
+import {event} from 'src/cloud/utils/reporting'
 
 export const Finish = () => {
+  useEffect(() => {
+    event('firstMile.pythonWizard.finished')
+  }, [])
   return (
     <>
       <h1>Congrats!</h1>

src/homepageExperience/components/steps/InitalizeClient.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
 import CodeSnippet from 'src/shared/components/CodeSnippet'
+import {event} from 'src/cloud/utils/reporting'
+
+const logCopyCodeSnippet = () => {
+  event('firstMile.pythonWizard.initializeClient.code.copied')
+}
 
 export const InitalizeClient = () => {
   const pythonCode = `import os
@@ -25,7 +30,7 @@ write_api = client.write_api(write_options=SYNCHRONOUS)`
       <p style={{marginTop: '40px'}}>
         Paste the following code after the prompt (>>>) and press Enter.
       </p>
-      <CodeSnippet text={pythonCode} />
+      <CodeSnippet text={pythonCode} onCopy={logCopyCodeSnippet} />
       <p style={{marginTop: '42px'}}>
         Here, we initialize the token, organization info, and server url that is
         needed to set up the initial connection to InfluxDB. The client

src/homepageExperience/components/steps/InstallDependencies.tsx

@@ -1,7 +1,11 @@
 import React, {PureComponent} from 'react'
 import CodeSnippet from 'src/shared/components/CodeSnippet'
+import {event} from 'src/cloud/utils/reporting'
 
 export class InstallDependencies extends PureComponent {
+  private logCopyCodeSnippet = () => {
+    event('firstMile.pythonWizard.installDependencies.code.copied')
+  }
   render() {
     return (
       <>
@@ -11,7 +15,10 @@ export class InstallDependencies extends PureComponent {
           <code style={{color: '#B7B8FF'}}>influxdb-client</code> module. Run
           the command below in your terminal.
         </p>
-        <CodeSnippet text="pip3 install influxdb-client" onCopy={null} />
+        <CodeSnippet
+          text="pip3 install influxdb-client"
+          onCopy={this.logCopyCodeSnippet}
+        />
         <p style={{fontStyle: 'italic'}}>
           You’ll need to have Python 3 installed.
         </p>

src/homepageExperience/components/steps/Overview.tsx

@@ -1,6 +1,10 @@
 import React, {PureComponent} from 'react'
+import {event} from 'src/cloud/utils/reporting'
 
 export class Overview extends PureComponent {
+  private logDocsOpened = () => {
+    event('firstMile.pythonWizard.overview.docs.opened')
+  }
   render() {
     return (
       <div>
@@ -23,7 +27,14 @@ export class Overview extends PureComponent {
 
           <p style={{marginTop: '150px'}}>
             Want to just look at code? Check out the code snippets involved in
-            this guide on <a href="https://github.com/influxdata/ui">Github</a>.
+            this guide on{' '}
+            <a
+              href="https://github.com/influxdata/ui"
+              onClick={this.logDocsOpened}
+            >
+              Github
+            </a>
+            .
           </p>
         </article>
       </div>

src/homepageExperience/components/steps/Step.tsx

@@ -42,9 +42,9 @@ const Step = (props: StepProps) => {
             color: iconAndTextColor,
           }}
         >
-          {text.split('\n').map(function(item, key) {
+          {text.split('\n').map(function(item, index) {
             return (
-              <span key={key}>
+              <span key={`${item}-${index}`}>
                 {item}
                 <br />
               </span>

src/homepageExperience/components/steps/WriteData.tsx

@@ -18,6 +18,7 @@ import WriteDataDetailsContextProvider, {
 import {getOrg} from 'src/organizations/selectors'
 import DataListening from 'src/homepageExperience/components/DataListening'
 import {getBuckets} from 'src/buckets/actions/thunks'
+import {event} from 'src/cloud/utils/reporting'
 
 const codeSnippet = `for value in range(5):
     point = (
@@ -28,6 +29,14 @@ const codeSnippet = `for value in range(5):
     write_api.write(bucket=bucket, org=org, record=point)
     time.sleep(1)`
 
+const logCopyCodeSnippet = () => {
+  event('firstMile.pythonWizard.writeData.code.copied')
+}
+
+const logDocsOpened = () => {
+  event('firstMile.pythonWizard.writeData.docs.opened')
+}
+
 export const WriteDataComponent = () => {
   const org = useSelector(getOrg)
   const dispatch = useDispatch()
@@ -50,7 +59,10 @@ export const WriteDataComponent = () => {
       <p>
         To start writing data, we need a place to our time-series store data. We
         call these{' '}
-        <SafeBlankLink href={`orgs/${org.id}/load-data/buckets`}>
+        <SafeBlankLink
+          href={`orgs/${org.id}/load-data/buckets`}
+          onClick={logDocsOpened}
+        >
           buckets.
         </SafeBlankLink>
       </p>
@@ -70,15 +82,21 @@ export const WriteDataComponent = () => {
         In this code, we define five data points and write each one for
         InfluxDB. Run the following code in your Python shell:
       </p>
-      <CodeSnippet text={codeSnippet} />
+      <CodeSnippet text={codeSnippet} onCopy={logCopyCodeSnippet} />
       <p style={{marginTop: '20px'}}>
         In the above code snippet, we define five data points and write each on
         the InfluxDB. Each of the 5 points we write has a{' '}
-        <SafeBlankLink href="https://docs.influxdata.com/influxdb/v1.8/concepts/glossary/#field-key">
+        <SafeBlankLink
+          href="https://docs.influxdata.com/influxdb/v1.8/concepts/glossary/#field-key"
+          onClick={logDocsOpened}
+        >
           field
         </SafeBlankLink>{' '}
         and a{' '}
-        <SafeBlankLink href="https://docs.influxdata.com/influxdb/v1.8/concepts/glossary/#tag-key">
+        <SafeBlankLink
+          href="https://docs.influxdata.com/influxdb/v1.8/concepts/glossary/#tag-key"
+          onClick={logDocsOpened}
+        >
           tag
         </SafeBlankLink>
         .

src/homepageExperience/containers/HomepageContainer.scss

@@ -9,6 +9,7 @@
     margin-bottom: 30px;
   }
   align-items: center;
+  justify-content: center;
   flex-direction: column;
   height: 100%;
   cursor: pointer;