Skip to content

Commit aec84b9

Browse files
mavariusmavarius
authored
feat(ui): Add Python SQL onboarding for IOx (#6516)
* feat(ui): Update Overview text * feat(ui): Add new subway nav for sql onboarding * feat(ui): remove JS and Arduino for IOx * feat(ui): create new SQL steps * feat(ui): add new steps to python onboarding * feat(ui): update finish step * fix(ui): fix margin for write data step in non-iox * chore(ui): appease linter * fix(ui): update tests to look for new text * feat(ui): update instructions for flightsql * refactor: alphabetize props * refactor: move style outside of component * refactor: remove inline styles * feat: add confirmation message line
1 parent 0f4660f commit aec84b9

File tree

12 files changed

+572
-69
lines changed

12 files changed

+572
-69
lines changed

‎cypress/e2e/shared/arduino.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@ describe('Arduino onboarding flow', () => {
6767
cy.contains(/^Write Data$/).click()
6868
cy.get('h1').contains('Write Data')
6969

70-
cy.contains(/^Execute Flux Query$/).click()
70+
cy.contains(/^Execute a Flux Query$/).click()
7171
cy.get('h1').contains('Execute a Flux Query')
7272

73-
cy.contains(/^Execute Aggregate$/).click()
73+
cy.contains(/^Execute an Aggregate Query$/).click()
7474
cy.get('h1').contains('Execute a Flux Aggregate Query')
7575

7676
cy.contains(/^Finish$/).click()

‎cypress/e2e/shared/influxCLI.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@ describe('Influx CLI onboarding', () => {
5959
cy.contains(/^Write Data$/).click()
6060
cy.get('h1').contains('Write Data')
6161

62-
cy.contains(/^Execute Flux Query$/).click()
62+
cy.contains(/^Execute a Flux Query$/).click()
6363
cy.contains('Execute a Flux Query')
6464

65-
cy.contains(/^Execute Aggregate$/).click()
65+
cy.contains(/^Execute an Aggregate Query$/).click()
6666
cy.get('h1').contains('Execute a Flux Aggregate Query')
6767

6868
cy.contains(/^Finish$/).click()

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,8 @@ export const Finish = (props: OwnProps) => {
152152
)}
153153
</FlexBox>
154154
{props.wizardEventName !== 'cliWizard' &&
155-
props.wizardEventName !== 'arduinoWizard' ? (
155+
props.wizardEventName !== 'arduinoWizard' &&
156+
props.wizardEventName !== 'pythonSqlWizard' ? (
156157
<SampleAppCard
157158
handleNextStepEvent={handleNextStepEvent}
158159
wizardEventName={props.wizardEventName}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@ export const Overview: FC<Props> = ({wizard}) => {
3030
<h1>Hello, Time-Series World!</h1>
3131
<article>
3232
<p>Welcome and thanks for checking out InfluxData!</p>
33-
3433
<p>
3534
In the next 5 minutes, you will set up InfluxData on your machine and
3635
write and execute some basic queries.
3736
</p>
37+
<p>New to time-series data? Here's a brief video introduction:</p>
3838
<iframe
3939
ref={videoFrame}
4040
width="560"

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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 {selectCurrentIdentity} from 'src/identity/selectors'
8+
9+
const logCopyCodeSnippet = () => {
10+
event('firstMile.pythonWizard.executeQuery.code.copied')
11+
}
12+
13+
type OwnProps = {
14+
bucket: string
15+
}
16+
17+
export const ExecuteQuerySql = (props: OwnProps) => {
18+
const {org: quartzOrg} = useSelector(selectCurrentIdentity)
19+
const url = quartzOrg.clusterHost || window.location.origin
20+
21+
const {bucket} = props
22+
23+
const sqlSnippet = `SELECT *
24+
FROM 'census'
25+
WHERE time >= now() - interval '1 hour'
26+
AND ('bees' IS NOT NULL OR 'ants' IS NOT NULL)`
27+
28+
const query = `from flightsql import FlightSQLClient
29+
30+
query = """SELECT *
31+
FROM 'census'
32+
WHERE time >= now() - interval '24 hours'
33+
AND ('bees' IS NOT NULL OR 'ants' IS NOT NULL)"""
34+
35+
# Define the query client
36+
query_client = FlightSQLClient(
37+
host = "${url.replace(/^https?:\/\//, '')}",
38+
token = os.environ.get("INFLUXDB_TOKEN"),
39+
metadata={"bucket-name": "${bucket}"})
40+
41+
# Execute the query
42+
info = query_client.execute(query)
43+
reader = query_client.do_get(info.endpoints[0].ticket)
44+
45+
# Convert to dataframe
46+
data = reader.read_all()
47+
df = data.to_pandas().sort_values(by="time")
48+
print(df)
49+
`
50+
51+
const queryPreview = ` ants bees location time
52+
0 NaN 23.0 Klamath 2023-01-18 05:20:46.485256499
53+
3 30.0 NaN Portland 2023-01-18 05:20:47.879847987
54+
1 NaN 28.0 Klamath 2023-01-18 05:20:49.126909775
55+
4 32.0 NaN Portland 2023-01-18 05:20:50.636016064
56+
2 NaN 29.0 Klamath 2023-01-18 05:20:52.047057410
57+
5 40.0 NaN Portland 2023-01-18 05:20:53.680696168
58+
`
59+
60+
return (
61+
<>
62+
<h1>Execute a SQL Query</h1>
63+
<p>
64+
Now let's query the data we wrote into the database with SQL. Here is
65+
what our query looks like on its own:
66+
</p>
67+
<CodeSnippet
68+
language="sql"
69+
onCopy={logCopyCodeSnippet}
70+
showCopyControl={false}
71+
text={sqlSnippet}
72+
/>
73+
<p>
74+
In this query, we are looking for data points within the last 1 hour
75+
with a "census" measurement and either "bees" or "ants" fields.
76+
</p>
77+
<p>
78+
Let's use that SQL query in our Python code to show us the results of
79+
what we have written. We'll use pandas to format the results into a
80+
table.
81+
</p>
82+
<p>Run the following:</p>
83+
<CodeSnippet language="python" onCopy={logCopyCodeSnippet} text={query} />
84+
<p>
85+
The code snippet above should print out the data you wrote in previous
86+
steps. The result should resemble this:
87+
</p>
88+
<CodeSnippet
89+
language="text"
90+
onCopy={logCopyCodeSnippet}
91+
showCopyControl={false}
92+
text={queryPreview}
93+
/>
94+
</>
95+
)
96+
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ token = os.environ.get("INFLUXDB_TOKEN")
2525
org = "${org.name}"
2626
url = "${url}"
2727
28-
client = influxdb_client.InfluxDBClient(url=url, token=token, org=org)
28+
write_client = influxdb_client.InfluxDBClient(url=url, token=token, org=org)
2929
`
3030

3131
return (
@@ -34,17 +34,17 @@ client = influxdb_client.InfluxDBClient(url=url, token=token, org=org)
3434
<p>
3535
Run this command in your terminal to open the interactive Python shell:
3636
</p>
37-
<CodeSnippet text="python3" language="properties" />
38-
<p style={{marginTop: '40px'}}>
37+
<CodeSnippet language="properties" text="python3" />
38+
<p>
3939
Paste the following code after the prompt (&gt;&gt;&gt;) and press
4040
Enter.
4141
</p>
4242
<CodeSnippet
43-
text={pythonCode}
44-
onCopy={logCopyCodeSnippet}
4543
language="python"
44+
onCopy={logCopyCodeSnippet}
45+
text={pythonCode}
4646
/>
47-
<p style={{marginTop: '42px'}}>
47+
<p>
4848
Here, we initialize the token, organization info, and server url that
4949
are needed to set up the initial connection to InfluxDB. The client
5050
connection is then established with the{' '}

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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 InstallDependenciesSql extends PureComponent {
8+
private logCopyCodeSnippet = () => {
9+
event('firstMile.pythonWizard.InstallDependencies.code.copied')
10+
}
11+
render() {
12+
return (
13+
<>
14+
<h1>Install Dependencies</h1>
15+
<p>
16+
The first thing you'll need to do is ensure you have{' '}
17+
<SafeBlankLink href="https://www.python.org/download/releases/3.0/">
18+
Python 3
19+
</SafeBlankLink>{' '}
20+
installed, this will not work with older versions of Python.
21+
</p>
22+
<p>
23+
Install the{' '}
24+
<SafeBlankLink href="https://github.com/influxdata/influxdb-client-python">
25+
influxdb-client
26+
</SafeBlankLink>{' '}
27+
module. You'll use this to write to InfluxDB. Run the command below in
28+
your terminal:
29+
</p>
30+
<CodeSnippet
31+
language="properties"
32+
onCopy={this.logCopyCodeSnippet}
33+
text="pip install influxdb-client"
34+
/>
35+
<p>
36+
Next, install the{' '}
37+
<SafeBlankLink href="https://github.com/influxdata/flightsql-dbapi">
38+
flightsql-dbapi
39+
</SafeBlankLink>
40+
. This is used to Query InfluxDB with SQL.
41+
</p>
42+
<CodeSnippet
43+
language="properties"
44+
onCopy={this.logCopyCodeSnippet}
45+
text="pip install flightsql-dbapi"
46+
/>
47+
<p>
48+
Lastly, let's install{' '}
49+
<SafeBlankLink href="https://pandas.pydata.org/">
50+
pandas
51+
</SafeBlankLink>{' '}
52+
which will be helpful for organizing our data output when we query.
53+
</p>
54+
<CodeSnippet
55+
language="properties"
56+
onCopy={this.logCopyCodeSnippet}
57+
text="pip install pandas"
58+
/>
59+
</>
60+
)
61+
}
62+
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ for value in range(5):
9494
onCopy={logCopyCodeSnippet}
9595
language="python"
9696
/>
97-
<p style={{marginTop: '20px'}}>
97+
<p>
9898
In the above code snippet, we define five data points and write each one
9999
to InfluxDB. Each of the 5 points we write has a{' '}
100100
<SafeBlankLink
@@ -112,10 +112,9 @@ for value in range(5):
112112
</SafeBlankLink>
113113
.
114114
</p>
115-
<p style={{marginTop: '40px'}}>
115+
<p>
116116
Once you write this data, you’ll begin to see the confirmation below
117117
</p>
118-
119118
<Panel backgroundColor={InfluxColors.Grey15}>
120119
<Panel.Body>
121120
<DataListening bucket={selectedBucket.name} />

0 commit comments

Comments
 (0)