Skip to content

Commit 644fd98

Browse files
hoorayimhelpinghoorayimhelping
authored
feat(firstMile): add nodejs Initialize Client and Write Data (#4319)
1 parent 6157012 commit 644fd98

File tree

5 files changed

+192
-5
lines changed

5 files changed

+192
-5
lines changed

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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.nodejsWizard.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 = `const {InfluxDB, Point} = require('@influxdata/influxdb-client')
20+
21+
const token = process.env.INFLUXDB_TOKEN
22+
const url = '${url}'
23+
24+
const influxDBClient = new InfluxDB({url, token})`
25+
26+
return (
27+
<>
28+
<h1>Initalize Client</h1>
29+
<p>
30+
Run this command in your terminal to open the interactive Nodejs shell:
31+
</p>
32+
<CodeSnippet text="node" />
33+
<p style={{marginTop: '40px'}}>
34+
Paste the following code after the prompt (>) and press Enter.
35+
</p>
36+
<CodeSnippet text={codeSnippet} onCopy={logCopyCodeSnippet} />
37+
<p style={{marginTop: '42px'}}>
38+
Here, we initialize the token, organization info, and server url that is
39+
needed to set up the initial connection to InfluxDB. The client
40+
connection is then established with InfluxDBClient initialization.
41+
</p>
42+
</>
43+
)
44+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {event} from 'src/cloud/utils/reporting'
66

77
export class InstallDependencies extends PureComponent {
88
private logCopyCodeSnippet = () => {
9-
event('firstMile.nodeJSWizard.installDependencies.code.copied')
9+
event('firstMile.nodejsWizard.installDependencies.code.copied')
1010
}
1111
render() {
1212
return (

‎src/homepageExperience/components/steps/nodejs/WriteData.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React, {useContext, useEffect, useState} from 'react'
2+
import {useDispatch, useSelector} from 'react-redux'
3+
import {
4+
Columns,
5+
ComponentSize,
6+
Grid,
7+
InfluxColors,
8+
Panel,
9+
} from '@influxdata/clockface'
10+
11+
import {SafeBlankLink} from 'src/utils/SafeBlankLink'
12+
import WriteDataHelperBuckets from 'src/writeData/components/WriteDataHelperBuckets'
13+
import CodeSnippet from 'src/shared/components/CodeSnippet'
14+
import WriteDataDetailsContextProvider, {
15+
WriteDataDetailsContext,
16+
} from 'src/writeData/components/WriteDataDetailsContext'
17+
18+
import {getOrg} from 'src/organizations/selectors'
19+
import DataListening from 'src/homepageExperience/components/DataListening'
20+
import {getBuckets} from 'src/buckets/actions/thunks'
21+
import {event} from 'src/cloud/utils/reporting'
22+
23+
const logCopyCodeSnippet = () => {
24+
event('firstMile.nodejsWizard.writeData.code.copied')
25+
}
26+
27+
const logDocsOpened = () => {
28+
event('firstMile.nodejsWizard.writeData.docs.opened')
29+
}
30+
31+
type WriteDataProps = {
32+
onSelectBucket: (bucketName: string) => void
33+
}
34+
35+
export const WriteDataComponent = (props: WriteDataProps) => {
36+
const org = useSelector(getOrg)
37+
const dispatch = useDispatch()
38+
const {onSelectBucket} = props
39+
40+
useEffect(() => {
41+
dispatch(getBuckets())
42+
}, [])
43+
44+
const {bucket} = useContext(WriteDataDetailsContext)
45+
46+
const [selectedBucket, setSelectedBucket] = useState(bucket)
47+
48+
useEffect(() => {
49+
setSelectedBucket(bucket)
50+
onSelectBucket(bucket.name)
51+
}, [bucket])
52+
53+
const codeSnippet = `
54+
const org = '${org.name}'
55+
const bucket = '${bucket.name}'
56+
57+
const writeClient = influxDBClient.getWriteApi(org, bucket, 'ns')
58+
59+
for (let i = 0; i < 5; i++) {
60+
const point = new Point('measurement1')
61+
.tag('tagname1', 'tagvalue1')
62+
.floatField('field1', i)
63+
64+
setTimeout(() => {
65+
writeClient.writePoint(point)
66+
}, i * 1000) // separate points by 1 second
67+
}`
68+
69+
return (
70+
<>
71+
<h1>Write Data</h1>
72+
<p>
73+
To start writing data, we need a place to our time-series store data. We
74+
call these{' '}
75+
<SafeBlankLink
76+
href={`orgs/${org.id}/load-data/buckets`}
77+
onClick={logDocsOpened}
78+
>
79+
buckets.
80+
</SafeBlankLink>
81+
</p>
82+
83+
<Panel backgroundColor={InfluxColors.Grey15}>
84+
<Panel.Body size={ComponentSize.ExtraSmall}>
85+
<Grid>
86+
<Grid.Row>
87+
<Grid.Column widthSM={Columns.Twelve}>
88+
<WriteDataHelperBuckets useSimplifiedBucketForm={true} />
89+
</Grid.Column>
90+
</Grid.Row>
91+
</Grid>
92+
</Panel.Body>
93+
</Panel>
94+
<p>
95+
In this code, we define five data points and write each one for
96+
InfluxDB. Run the following code in your Nodejs shell:
97+
</p>
98+
<CodeSnippet text={codeSnippet} onCopy={logCopyCodeSnippet} />
99+
<p style={{marginTop: '20px'}}>
100+
In the above code snippet, we define five data points and write each on
101+
the InfluxDB. Each of the 5 points we write has a{' '}
102+
<SafeBlankLink
103+
href="https://docs.influxdata.com/influxdb/v1.8/concepts/glossary/#field-key"
104+
onClick={logDocsOpened}
105+
>
106+
field
107+
</SafeBlankLink>{' '}
108+
and a{' '}
109+
<SafeBlankLink
110+
href="https://docs.influxdata.com/influxdb/v1.8/concepts/glossary/#tag-key"
111+
onClick={logDocsOpened}
112+
>
113+
tag
114+
</SafeBlankLink>
115+
.
116+
</p>
117+
<p style={{marginTop: '40px'}}>
118+
Once you write this data, you’ll begin to see the confirmation below
119+
</p>
120+
121+
<Panel backgroundColor={InfluxColors.Grey15}>
122+
<Panel.Body>
123+
<DataListening bucket={selectedBucket.name} />
124+
</Panel.Body>
125+
</Panel>
126+
</>
127+
)
128+
}
129+
130+
export const WriteData = props => {
131+
return (
132+
<WriteDataDetailsContextProvider>
133+
<WriteDataComponent onSelectBucket={props.onSelectBucket} />
134+
</WriteDataDetailsContextProvider>
135+
)
136+
}

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
import React from 'react'
2+
import {useSelector} from 'react-redux'
3+
24
import CodeSnippet from 'src/shared/components/CodeSnippet'
35
import {event} from 'src/cloud/utils/reporting'
4-
import {useSelector} from 'react-redux'
6+
57
import {getOrg} from 'src/organizations/selectors'
8+
import {getMe} from 'src/me/selectors'
69

710
const logCopyCodeSnippet = () => {
811
event('firstMile.pythonWizard.initializeClient.code.copied')
912
}
1013

1114
export const InitalizeClient = () => {
1215
const org = useSelector(getOrg)
16+
const me = useSelector(getMe)
17+
18+
const url =
19+
me.quartzMe?.clusterHost || 'https://us-west-2-1.aws.cloud2.influxdata.com/'
1320

1421
const pythonCode = `import os
1522
from influxdb_client import InfluxDBClient, Point, WritePrecision
1623
from influxdb_client.client import SYNCHRONOUS
1724
1825
token = os.environ.get("INFLUXDB_TOKEN")
1926
org = "${org.name}"
20-
url = "https://us-west-2-1.aws.cloud2.influxdata.com/"
27+
url = "${url}"
2128
2229
client = influxdb_client.InfluxDBClient(url=url, token=token, org=org)`
2330

‎src/homepageExperience/containers/NodejsWizard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import {
1212
import {InstallDependencies} from 'src/homepageExperience/components/steps/nodejs/InstallDependencies'
1313
import {Overview} from 'src/homepageExperience/components/steps/Overview'
1414
import {CreateToken} from 'src/homepageExperience/components/steps/CreateToken'
15-
import {InitalizeClient} from 'src/homepageExperience/components/steps/python/InitalizeClient'
16-
import {WriteData} from 'src/homepageExperience/components/steps/python/WriteData'
15+
import {InitalizeClient} from 'src/homepageExperience/components/steps/nodejs/InitalizeClient'
16+
import {WriteData} from 'src/homepageExperience/components/steps/nodejs/WriteData'
1717
import {ExecuteQuery} from 'src/homepageExperience/components/steps/python/ExecuteQuery'
1818
import {Finish} from 'src/homepageExperience/components/steps/python/Finish'
1919
import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/python/ExecuteAggregateQuery'

0 commit comments

Comments
 (0)