Skip to content

Commit a4841e2

Browse files
ChitlangeSahasChitlangeSahas
authored
feat: Go for firstmile (#4364)
1 parent 3d8bad6 commit a4841e2

File tree

12 files changed

+539
-11
lines changed

12 files changed

+539
-11
lines changed

‎src/homepageExperience/components/steps/CreateToken.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,15 @@ import {event} from 'src/cloud/utils/reporting'
1818

1919
type ReduxProps = ConnectedProps<typeof connector>
2020

21-
// Events log handling
22-
const logCopyCodeSnippet = () => {
23-
event('firstMile.pythonWizard.createToken.code.copied')
21+
type OwnProps = {
22+
wizardEventName: string
2423
}
2524

26-
const logDocsOpened = () => {
27-
event('firstMile.pythonWizard.createToken.docs.opened')
28-
}
29-
30-
const CreateTokenComponent: FC<ReduxProps & RouteComponentProps> = ({
25+
const CreateTokenComponent: FC<ReduxProps & RouteComponentProps & OwnProps> = ({
3126
showOverlay,
3227
dismissOverlay,
3328
getAllResources,
29+
wizardEventName,
3430
}) => {
3531
const org = useSelector(getOrg)
3632
const dispatch = useDispatch()
@@ -43,6 +39,15 @@ const CreateTokenComponent: FC<ReduxProps & RouteComponentProps> = ({
4339
}
4440
}
4541

42+
// Events log handling
43+
const logCopyCodeSnippet = () => {
44+
event(`firstMile.${wizardEventName}.createToken.code.copied`)
45+
}
46+
47+
const logDocsOpened = () => {
48+
event(`firstMile.${wizardEventName}.createToken.docs.opened`)
49+
}
50+
4651
return (
4752
<>
4853
<h1>Create a Token</h1>

‎src/homepageExperience/components/steps/go/ExecuteAggregateQuery.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react'
2+
import CodeSnippet from 'src/shared/components/CodeSnippet'
3+
4+
import {SafeBlankLink} from 'src/utils/SafeBlankLink'
5+
import {event} from 'src/cloud/utils/reporting'
6+
7+
const logCopyCodeSnippet = () => {
8+
event('firstMile.goWizard.executeAggregateQuery.code.copied')
9+
}
10+
11+
const logDocsOpened = () => {
12+
event('firstMile.goWizard.executeAggregateQuery.docs.opened')
13+
}
14+
15+
type OwnProps = {
16+
bucket: string
17+
}
18+
19+
export const ExecuteAggregateQuery = (props: OwnProps) => {
20+
const {bucket} = props
21+
22+
const fromBucketSnippet = `from(bucket: "${bucket}")
23+
|> range(start: -10m) # find data points in last 10 minutes
24+
|> mean()`
25+
26+
const query = `
27+
query := \`from(bucket: "${bucket}")
28+
|> range(start: -10m)
29+
|> filter(fn: (r) => r._measurement == "measurement1")
30+
|> mean()\`
31+
results, err := queryAPI.Query(context.Background(), query)
32+
if err != nil {
33+
log.Fatal(err)
34+
}
35+
for results.Next() {
36+
fmt.Println(results.Record())
37+
}
38+
if err := results.Err(); err != nil {
39+
log.Fatal(err)
40+
}`
41+
42+
return (
43+
<>
44+
<h1>Execute an Aggregate Query</h1>
45+
<p>
46+
An{' '}
47+
<SafeBlankLink
48+
href="https://docs.influxdata.com/flux/v0.x/function-types/#aggregates"
49+
onClick={logDocsOpened}
50+
>
51+
aggregate
52+
</SafeBlankLink>{' '}
53+
function is a powerful method for returning combined, summarized data
54+
about a set of time-series data.
55+
</p>
56+
<CodeSnippet
57+
text={fromBucketSnippet}
58+
showCopyControl={false}
59+
onCopy={logCopyCodeSnippet}
60+
/>
61+
<p>
62+
In this example, we use the mean() function to calculate the average of
63+
data points in last 10 minutes.
64+
<br />
65+
<br />
66+
Add the following to your <code>main</code> function:
67+
</p>
68+
<CodeSnippet text={query} onCopy={logCopyCodeSnippet} />
69+
<p style={{marginTop: '20px'}}>
70+
This will return the mean of the five values. ( (0+1+2+3+4) / 5 = 2 )
71+
</p>
72+
</>
73+
)
74+
}

‎src/homepageExperience/components/steps/go/ExecuteQuery.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react'
2+
3+
import CodeSnippet from 'src/shared/components/CodeSnippet'
4+
import {event} from 'src/cloud/utils/reporting'
5+
6+
const logCopyCodeSnippet = () => {
7+
event('firstMile.goWizard.executeQuery.code.copied')
8+
}
9+
10+
type OwnProps = {
11+
bucket: string
12+
}
13+
14+
export const ExecuteQuery = (props: OwnProps) => {
15+
const {bucket} = props
16+
17+
const fromBucketSnippet = `from(bucket: "${bucket}")
18+
|> range(start: -10m)`
19+
20+
const query = `queryAPI := client.QueryAPI(org)
21+
query := \`from(bucket: "${bucket}")
22+
|> range(start: -10m)
23+
|> filter(fn: (r) => r._measurement == "measurement1")\`
24+
results, err := queryAPI.Query(context.Background(), query)
25+
if err != nil {
26+
log.Fatal(err)
27+
}
28+
for results.Next() {
29+
fmt.Println(results.Record())
30+
}
31+
if err := results.Err(); err != nil {
32+
log.Fatal(err)
33+
}`
34+
35+
return (
36+
<>
37+
<h1>Execute a Flux Query</h1>
38+
<p>
39+
Now let’s query the numbers we wrote into the database. We use the Flux
40+
scripting language to query data. Flux is designed for querying,
41+
analyzing, and acting on data.
42+
<br />
43+
<br />
44+
Here is what a simple Flux query looks like on its own:
45+
</p>
46+
<CodeSnippet
47+
text={fromBucketSnippet}
48+
showCopyControl={false}
49+
onCopy={logCopyCodeSnippet}
50+
/>
51+
<p>
52+
In this query, we are looking for data points within last 10 minutes
53+
with field key of "field1".
54+
<br />
55+
<br />
56+
Let’s use that Flux query in our Go code!
57+
<br />
58+
<br />
59+
Add the following to your <code>main</code> function:
60+
</p>
61+
<CodeSnippet text={query} onCopy={logCopyCodeSnippet} />
62+
</>
63+
)
64+
}

‎src/homepageExperience/components/steps/go/InitalizeClient.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react'
2+
import {useSelector} from 'react-redux'
3+
4+
import CodeSnippet from 'src/shared/components/CodeSnippet'
5+
import {event} from 'src/cloud/utils/reporting'
6+
7+
import {getMe} from 'src/me/selectors'
8+
9+
const logCopyCodeSnippet = () => {
10+
event('firstMile.goWizard.initializeClient.code.copied')
11+
}
12+
13+
export const InitalizeClient = () => {
14+
const me = useSelector(getMe)
15+
16+
const url =
17+
me.quartzMe?.clusterHost || 'https://us-west-2-1.aws.cloud2.influxdata.com/'
18+
19+
const codeSnippet = `package main
20+
21+
import (
22+
"os"
23+
24+
influxdb2 "github.com/influxdata/influxdb-client-go/v2"
25+
)
26+
27+
func main() {
28+
token := os.Getenv("INFLUXDB_TOKEN")
29+
url := "${url}"
30+
client := influxdb2.NewClient(url, token)
31+
}`
32+
33+
return (
34+
<>
35+
<h1>Initalize Client</h1>
36+
37+
<p style={{marginTop: '40px'}}>
38+
Paste following code in your <code>main.go</code> file:
39+
</p>
40+
<CodeSnippet text={codeSnippet} onCopy={logCopyCodeSnippet} />
41+
<p style={{marginTop: '42px'}}>
42+
Here, we initialize the token, organization info, and server url that is
43+
needed to set up the initial connection to InfluxDB. The client
44+
connection is then established with InfluxDBClient initialization.
45+
</p>
46+
</>
47+
)
48+
}

‎src/homepageExperience/components/steps/go/InstallDependencies.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, {PureComponent} from 'react'
2+
import CodeSnippet from 'src/shared/components/CodeSnippet'
3+
import {SafeBlankLink} from 'src/utils/SafeBlankLink'
4+
5+
import {event} from 'src/cloud/utils/reporting'
6+
7+
export class InstallDependencies extends PureComponent {
8+
private logCopyCodeSnippet = () => {
9+
event('firstMile.goWizard.installDependencies.code.copied')
10+
}
11+
render() {
12+
return (
13+
<>
14+
<h1>Install Dependencies</h1>
15+
<p>
16+
First, you need to install the{' '}
17+
<code style={{color: '#B7B8FF'}}>influxdb-client-go</code> module. Run
18+
the command below in your terminal.
19+
</p>
20+
<CodeSnippet
21+
text="go get github.com/influxdata/influxdb-client-go/v2"
22+
onCopy={this.logCopyCodeSnippet}
23+
/>
24+
<p style={{fontStyle: 'italic'}}>
25+
You’ll need to have{' '}
26+
<SafeBlankLink href="https://go.dev/doc/go1.17/">
27+
Go 1.17
28+
</SafeBlankLink>{' '}
29+
or higher installed.
30+
</p>
31+
</>
32+
)
33+
}
34+
}

0 commit comments

Comments
 (0)