feat: auto-populate variables for first mile python (#4170)

Author: ChitlangeSahas

src/homepageExperience/components/steps/ExecuteAggregateQuery.tsx

@@ -3,20 +3,13 @@ import CodeSnippet from 'src/shared/components/CodeSnippet'
 
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 import {event} from 'src/cloud/utils/reporting'
+import {useSelector} from 'react-redux'
+import {getOrg} from 'src/organizations/selectors'
 
 const fromBucketSnippet = `from(bucket: “my-bucket”)
   |> range(start: -10m) # find data points in last 10 minutes
   |> mean()`
 
-const codeSnippet = `query_api = client.query_api()
-
-query = "from(bucket: \\"bucket1\\") |> range(start: -10m) |> filter(fn: (r) => r._measurement == "measurement1") |> mean()"
-tables = query_api.query(query, org=org)
-
-for table in tables:
-    for record in table.records:
-        print(record)`
-
 const logCopyCodeSnippet = () => {
   event('firstMile.pythonWizard.executeAggregateQuery.code.copied')
 }
@@ -25,7 +18,23 @@ const logDocsOpened = () => {
   event('firstMile.pythonWizard.executeAggregateQuery.docs.opened')
 }
 
-export const ExecuteAggregateQuery = () => {
+type ExecuteAggregateQueryProps = {
+  bucket: string
+}
+
+export const ExecuteAggregateQuery = (props: ExecuteAggregateQueryProps) => {
+  const org = useSelector(getOrg)
+  const {bucket} = props
+
+  const codeSnippet = `query_api = client.query_api()
+
+query = "from(bucket: \\"${bucket}\\") |> range(start: -10m) |> filter(fn: (r) => r._measurement == "measurement1") |> mean()"
+tables = query_api.query(query, org="${org.name}")
+
+for table in tables:
+    for record in table.records:
+        print(record)`
+
   return (
     <>
       <h1>Execute an Aggregate Query</h1>

src/homepageExperience/components/steps/ExecuteQuery.tsx

@@ -1,24 +1,32 @@
 import React from 'react'
 import CodeSnippet from 'src/shared/components/CodeSnippet'
 import {event} from 'src/cloud/utils/reporting'
+import {useSelector} from 'react-redux'
+import {getOrg} from 'src/organizations/selectors'
 
 const fromBucketSnippet = `from(bucket: “my-bucket”)
   |> range(start: -10m)`
 
-const query = `query_api = client.query_api()
+const logCopyCodeSnippet = () => {
+  event('firstMile.pythonWizard.executeQuery.code.copied')
+}
+
+type ExecuteQueryProps = {
+  bucket: string
+}
 
-query = "from(bucket: \\"bucket1\\") |> range(start: -10m) |> filter(fn: (r) => r._measurement == "measurement1")"
-tables = query_api.query(query, org=org)
+export const ExecuteQuery = (props: ExecuteQueryProps) => {
+  const org = useSelector(getOrg)
+  const {bucket} = props
+  const query = `query_api = client.query_api()
+
+query = "from(bucket: \\"${bucket}\\") |> range(start: -10m) |> filter(fn: (r) => r._measurement == "measurement1")"
+tables = query_api.query(query, org="${org.name}")
 
 for table in tables:
     for record in table.records:
         print(record)`
 
-const logCopyCodeSnippet = () => {
-  event('firstMile.pythonWizard.executeQuery.code.copied')
-}
-
-export const ExecuteQuery = () => {
   return (
     <>
       <h1>Execute a Flux Query</h1>

src/homepageExperience/components/steps/InitalizeClient.tsx

@@ -1,20 +1,24 @@
 import React from 'react'
 import CodeSnippet from 'src/shared/components/CodeSnippet'
 import {event} from 'src/cloud/utils/reporting'
+import {useSelector} from 'react-redux'
+import {getOrg} from 'src/organizations/selectors'
 
 const logCopyCodeSnippet = () => {
   event('firstMile.pythonWizard.initializeClient.code.copied')
 }
 
 export const InitalizeClient = () => {
+  const org = useSelector(getOrg)
+
   const pythonCode = `import os
 from datetime import datetime
 
 from influxdb_client import InfluxDBClient, Point, WritePrecision
 from influxdb_client.client import SYNCHRONOUS
 
 token = os.environ.get("INFLUXDB_TOKEN")
-org = "<user>@influxdata.com"
+org = "${org.name}"
 url = "https://us-west-2-1.aws.cloud2.influxdata.com/"
 
 client = influxdb_client.InfluxDBClient(url=url, token=token, org=org)

src/homepageExperience/components/steps/WriteData.tsx

@@ -20,15 +20,6 @@ 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 = (
-        Point("measurement1")
-        .tag("tagname1", "tagvalue1")
-        .field("field1", value)
-    )
-    write_api.write(bucket=bucket, org=org, record=point)
-    time.sleep(1)`
-
 const logCopyCodeSnippet = () => {
   event('firstMile.pythonWizard.writeData.code.copied')
 }
@@ -37,9 +28,14 @@ const logDocsOpened = () => {
   event('firstMile.pythonWizard.writeData.docs.opened')
 }
 
-export const WriteDataComponent = () => {
+type WriteDataProps = {
+  onSelectBucket: (bucketName: string) => void
+}
+
+export const WriteDataComponent = (props: WriteDataProps) => {
   const org = useSelector(getOrg)
   const dispatch = useDispatch()
+  const {onSelectBucket} = props
 
   useEffect(() => {
     dispatch(getBuckets())
@@ -51,8 +47,18 @@ export const WriteDataComponent = () => {
 
   useEffect(() => {
     setSelectedBucket(bucket)
+    onSelectBucket(bucket.name)
   }, [bucket])
 
+  const codeSnippet = `for value in range(5):
+    point = (
+        Point("measurement1")
+        .tag("tagname1", "tagvalue1")
+        .field("field1", value)
+    )
+    write_api.write(bucket="${bucket.name}", org="${org.name}", record=point)
+    time.sleep(1)`
+
   return (
     <>
       <h1>Write Data</h1>
@@ -114,10 +120,10 @@ export const WriteDataComponent = () => {
   )
 }
 
-export const WriteData = () => {
+export const WriteData = props => {
   return (
     <WriteDataDetailsContextProvider>
-      <WriteDataComponent />
+      <WriteDataComponent onSelectBucket={props.onSelectBucket} />
     </WriteDataDetailsContextProvider>
   )
 }

src/homepageExperience/containers/HomepagePythonWizard.tsx

@@ -25,11 +25,13 @@ import {event} from 'src/cloud/utils/reporting'
 
 interface State {
   currentStep: number
+  selectedBucket: string
 }
 
 export class HomepagePythonWizard extends PureComponent<null, State> {
   state = {
     currentStep: 1,
+    selectedBucket: '',
   }
 
   handleNextClick = () => {
@@ -55,6 +57,9 @@ export class HomepagePythonWizard extends PureComponent<null, State> {
     )
   }
 
+  private handleSelectBucket = (bucketName: string) => {
+    this.setState({selectedBucket: bucketName})
+  }
   renderStep = () => {
     switch (this.state.currentStep) {
       case 1: {
@@ -70,13 +75,13 @@ export class HomepagePythonWizard extends PureComponent<null, State> {
         return <InitalizeClient />
       }
       case 5: {
-        return <WriteData />
+        return <WriteData onSelectBucket={this.handleSelectBucket} />
       }
       case 6: {
-        return <ExecuteQuery />
+        return <ExecuteQuery bucket={this.state.selectedBucket} />
       }
       case 7: {
-        return <ExecuteAggregateQuery />
+        return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
       }
       case 8: {
         return <Finish />