feat(firstMile): add nodejs wizard execute aggregate query step (#4329)

Author: hoorayimhelping

src/homepageExperience/components/steps/python/Finish.tsx renamed to src/homepageExperience/components/steps/Finish.tsx

@@ -7,10 +7,13 @@ import {
   IconFont,
   ResourceCard,
 } from '@influxdata/clockface'
+
 import {
   InfluxDBUniversityIcon,
   VSCodePluginIcon,
 } from 'src/homepageExperience/components/HomepageIcons'
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+
 import {event} from 'src/cloud/utils/reporting'
 
 export const Finish = () => {
@@ -24,29 +27,31 @@ export const Finish = () => {
       <p>Curious to learn more? Try these next steps!</p>
       <FlexBox margin={ComponentSize.Medium} alignItems={AlignItems.Stretch}>
         <ResourceCard className="homepage-wizard-next-steps">
-          <a href="https://influxdbu.com/" target="_blank">
+          <SafeBlankLink href="https://influxdbu.com/">
             <h4>{InfluxDBUniversityIcon}InfluxDB University</h4>
-          </a>
+          </SafeBlankLink>
           <p>
             Our free hands-on courses teach you the technical skills and best
             practices to get the most out of your real-time data with InfluxDB."
           </p>
         </ResourceCard>
         <ResourceCard className="homepage-wizard-next-steps">
-          <a
-            href="https://docs.influxdata.com/influxdb/cloud/tools/flux-vscode"
-            target="_blank"
-          >
+          <SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/tools/flux-vscode">
             <h4>{VSCodePluginIcon}Install VSCode Plugin</h4>
-          </a>
+          </SafeBlankLink>
           <p>Streamline your workflow even further with our VSCode plugin!</p>
         </ResourceCard>
         <ResourceCard className="homepage-wizard-next-steps">
           <div
-            style={{display: 'flex', justifyContent: 'center', height: '100%'}}
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              height: '100%',
+              textTransform: 'uppercase',
+            }}
           >
             <h5>
-              MORE OPTIONS{' '}
+              More Options{' '}
               <Icon
                 glyph={IconFont.ArrowRight_New}
                 style={{marginLeft: '9px'}}

src/homepageExperience/components/steps/nodejs/ExecuteAggregateQuery.tsx

@@ -0,0 +1,77 @@
+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 logCopyCodeSnippet = () => {
+  event('firstMile.nodejsWizard.executeAggregateQuery.code.copied')
+}
+
+const logDocsOpened = () => {
+  event('firstMile.nodejsWizard.executeAggregateQuery.docs.opened')
+}
+
+type ExecuteAggregateQueryProps = {
+  bucket: string
+}
+
+export const ExecuteAggregateQuery = (props: ExecuteAggregateQueryProps) => {
+  const {bucket} = props
+
+  const fromBucketSnippet = `from(bucket: "${bucket}")
+  |> range(start: -10m) # find data points in last 10 minutes
+  |> mean()`
+
+  const query = `const queryClient = client.getQueryApi(org)
+const fluxQuery = \`from(bucket: "fooo")
+ |> range(start: -10m)
+ |> filter(fn: (r) => r._measurement == "measurement1")
+ |> mean()\`
+
+queryClient.queryRows(fluxQuery, {
+  next: (row, tableMeta) => {
+    const tableObject = tableMeta.toObject(row)
+    console.log(row, tableObject)
+  },
+  error: (error) => {
+    console.error('\\nError', error)
+  },
+  complete: () => {
+    console.log('\\nSuccess')
+  },
+})`
+
+  return (
+    <>
+      <h1>Execute an Aggregate Query</h1>
+      <p>
+        An{' '}
+        <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}
+        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={query} 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/nodejs/ExecuteQuery.tsx

@@ -25,7 +25,7 @@ const fluxQuery = \`from(bucket: "fooo")
 queryClient.queryRows(fluxQuery, {
   next: (row, tableMeta) => {
     const tableObject = tableMeta.toObject(row)
-    console.log(tableObject)
+    console.log(row, tableObject)
   },
   error: (error) => {
     console.error('\\nError', error)

src/homepageExperience/containers/HomepageContainer.tsx

@@ -42,7 +42,7 @@ export const HomepageContainer: FC = () => {
   const pythonWizardLink = `/orgs/${org.id}/new-user-wizard/python`
   const cliPageLink = `/orgs/${org.id}/load-data/file-upload/csv`
   const telegrafPageLink = `/orgs/${org.id}/load-data/telegrafs`
-  const javaScriptNodeLink = `/orgs/${org.id}/load-data/client-libraries/javascript-node`
+  const javaScriptNodeLink = `/orgs/${org.id}/new-user-wizard/nodejs`
   const golangLink = `/orgs/${org.id}/load-data/client-libraries/go`
   const loadDataSourcesLink = `/orgs/${org.id}/load-data/sources`
 

src/homepageExperience/containers/NodejsWizard.tsx

@@ -15,8 +15,8 @@ import {CreateToken} from 'src/homepageExperience/components/steps/CreateToken'
 import {InitalizeClient} from 'src/homepageExperience/components/steps/nodejs/InitalizeClient'
 import {WriteData} from 'src/homepageExperience/components/steps/nodejs/WriteData'
 import {ExecuteQuery} from 'src/homepageExperience/components/steps/nodejs/ExecuteQuery'
-import {Finish} from 'src/homepageExperience/components/steps/python/Finish'
-import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/python/ExecuteAggregateQuery'
+import {Finish} from 'src/homepageExperience/components/steps/Finish'
+import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/nodejs/ExecuteAggregateQuery'
 
 import {NodejsIcon} from 'src/homepageExperience/components/HomepageIcons'
 

src/homepageExperience/containers/PythonWizard.tsx

@@ -15,7 +15,7 @@ import {CreateToken} from 'src/homepageExperience/components/steps/CreateToken'
 import {InitalizeClient} from 'src/homepageExperience/components/steps/python/InitalizeClient'
 import {WriteData} from 'src/homepageExperience/components/steps/python/WriteData'
 import {ExecuteQuery} from 'src/homepageExperience/components/steps/python/ExecuteQuery'
-import {Finish} from 'src/homepageExperience/components/steps/python/Finish'
+import {Finish} from 'src/homepageExperience/components/steps/Finish'
 import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/python/ExecuteAggregateQuery'
 
 import {PythonIcon} from 'src/homepageExperience/components/HomepageIcons'