Skip to content

Commit ca14dc0

Browse files
mavariusmavarius
authored
feat(ui): add sql cli instructions (#6542)
1 parent 9130648 commit ca14dc0

File tree

4 files changed

+169
-16
lines changed

4 files changed

+169
-16
lines changed

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

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
// Libraries
2+
import React, {useEffect} from 'react'
3+
4+
// Components
5+
import CodeSnippet from 'src/shared/components/CodeSnippet'
6+
7+
// Constants
8+
import {DEFAULT_BUCKET} from 'src/writeData/components/WriteDataDetailsContext'
9+
10+
// Utils
11+
import {event} from 'src/cloud/utils/reporting'
12+
import {
13+
isUsingWindows,
14+
keyboardCopyTriggered,
15+
userSelection,
16+
} from 'src/utils/crossPlatform'
17+
18+
const logCopyCodeSnippet = () => {
19+
event('firstMile.cliWizard.executeQuery.code.copied')
20+
}
21+
22+
type OwnProps = {
23+
bucket: string
24+
}
25+
26+
export const ExecuteQuerySql = (props: OwnProps) => {
27+
const {bucket} = props
28+
29+
const bucketName = bucket === DEFAULT_BUCKET ? 'sample-bucket' : bucket
30+
31+
const queryMacSql = `influx query "
32+
import \\"experimental/iox\\"
33+
34+
iox.sql(
35+
bucket: \\"${bucketName}\\",
36+
query: \\"
37+
SELECT
38+
*
39+
FROM
40+
'airSensors'
41+
WHERE
42+
time >= now() - interval '30 minutes'
43+
\\",
44+
)"`
45+
46+
const queryWindowsSql = `.\\influx query
47+
import \\"experimental/iox\\"
48+
49+
iox.sql(
50+
bucket: \\"${bucketName}\\",
51+
query: \\"
52+
SELECT
53+
*
54+
FROM
55+
'airSensors'
56+
WHERE
57+
time >= now() - interval '30 minutes'
58+
\\",
59+
)"`
60+
61+
const sqlExample = `SELECT
62+
*
63+
FROM
64+
'airSensors'
65+
WHERE
66+
time >= now() - interval '30 minutes'`
67+
68+
useEffect(() => {
69+
const fireKeyboardCopyEvent = event => {
70+
if (
71+
keyboardCopyTriggered(event) &&
72+
userSelection().includes('influx query')
73+
) {
74+
logCopyCodeSnippet()
75+
}
76+
}
77+
document.addEventListener('keydown', fireKeyboardCopyEvent)
78+
return () => document.removeEventListener('keydown', fireKeyboardCopyEvent)
79+
}, [])
80+
81+
return (
82+
<>
83+
<h1>Execute a SQL Query</h1>
84+
<p>
85+
Now let's query the data we wrote into the database. This is isolated
86+
SQL query:
87+
</p>
88+
<CodeSnippet
89+
text={sqlExample}
90+
showCopyControl={false}
91+
language="properties"
92+
></CodeSnippet>
93+
<p style={{marginTop: '60px'}}>
94+
Let's write our SQL query in the InfluxDB CLI to read back all of the
95+
data you wrote in the previous step. Copy the code snippet below into
96+
the InfluxDB CLI.
97+
</p>
98+
<CodeSnippet
99+
text={isUsingWindows() ? queryWindowsSql : queryMacSql}
100+
onCopy={logCopyCodeSnippet}
101+
language="properties"
102+
/>
103+
</>
104+
)
105+
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
186186
</Table.Row>
187187
<Table.Row>
188188
<Table.Cell>query</Table.Cell>
189-
<Table.Cell>Execute a Flux query</Table.Cell>
189+
<Table.Cell>Execute a query</Table.Cell>
190190
</Table.Row>
191191
<Table.Row>
192192
<Table.Cell>write</Table.Cell>
@@ -264,7 +264,7 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
264264
</Table.Row>
265265
<Table.Row>
266266
<Table.Cell>query</Table.Cell>
267-
<Table.Cell>Execute a Flux query</Table.Cell>
267+
<Table.Cell>Execute a query</Table.Cell>
268268
</Table.Row>
269269
<Table.Row>
270270
<Table.Cell>write</Table.Cell>
@@ -348,7 +348,7 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
348348
</Table.Row>
349349
<Table.Row>
350350
<Table.Cell>query</Table.Cell>
351-
<Table.Cell>Execute a Flux query</Table.Cell>
351+
<Table.Cell>Execute a query</Table.Cell>
352352
</Table.Row>
353353
<Table.Row>
354354
<Table.Cell>write</Table.Cell>

‎src/homepageExperience/containers/CliWizard.tsx‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,11 @@ import {event} from 'src/cloud/utils/reporting'
2828
import {
2929
scrollNextPageIntoView,
3030
HOMEPAGE_NAVIGATION_STEPS_SHORT,
31+
HOMEPAGE_NAVIGATION_STEPS_SHORT_SQL,
3132
} from 'src/homepageExperience/utils'
3233
import {normalizeEventName} from 'src/cloud/utils/reporting'
34+
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
35+
import {ExecuteQuerySql} from '../components/steps/cli/ExecuteQuerySql'
3336

3437
interface State {
3538
currentStep: number
@@ -48,6 +51,10 @@ export class CliWizard extends PureComponent<{}, State> {
4851
finalFeedback: null,
4952
}
5053

54+
subwayNavSteps = isFlagEnabled('ioxOnboarding')
55+
? HOMEPAGE_NAVIGATION_STEPS_SHORT_SQL
56+
: HOMEPAGE_NAVIGATION_STEPS_SHORT
57+
5158
private handleSelectBucket = (bucketName: string) => {
5259
this.setState({selectedBucket: bucketName})
5360
}
@@ -69,7 +76,7 @@ export class CliWizard extends PureComponent<{}, State> {
6976
{
7077
currentStep: Math.min(
7178
this.state.currentStep + 1,
72-
HOMEPAGE_NAVIGATION_STEPS_SHORT.length
79+
this.subwayNavSteps.length
7380
),
7481
},
7582
() => {
@@ -78,10 +85,10 @@ export class CliWizard extends PureComponent<{}, State> {
7885
{},
7986
{
8087
clickedButtonAtStep: normalizeEventName(
81-
HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep - 2].name
88+
this.subwayNavSteps[this.state.currentStep - 2].name
8289
),
8390
currentStep: normalizeEventName(
84-
HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep - 1].name
91+
this.subwayNavSteps[this.state.currentStep - 1].name
8592
),
8693
}
8794
)
@@ -100,10 +107,10 @@ export class CliWizard extends PureComponent<{}, State> {
100107
{},
101108
{
102109
clickedButtonAtStep: normalizeEventName(
103-
HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep].name
110+
this.subwayNavSteps[this.state.currentStep].name
104111
),
105112
currentStep: normalizeEventName(
106-
HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep - 1].name
113+
this.subwayNavSteps[this.state.currentStep - 1].name
107114
),
108115
}
109116
)
@@ -120,7 +127,7 @@ export class CliWizard extends PureComponent<{}, State> {
120127
{},
121128
{
122129
currentStep: normalizeEventName(
123-
HOMEPAGE_NAVIGATION_STEPS_SHORT[clickedStep - 1].name
130+
this.subwayNavSteps[clickedStep - 1].name
124131
),
125132
}
126133
)
@@ -148,10 +155,26 @@ export class CliWizard extends PureComponent<{}, State> {
148155
return <WriteData bucket={this.state.selectedBucket} />
149156
}
150157
case 5: {
151-
return <ExecuteQuery bucket={this.state.selectedBucket} />
158+
if (isFlagEnabled('ioxOnboarding')) {
159+
return <ExecuteQuerySql bucket={this.state.selectedBucket} />
160+
} else {
161+
return <ExecuteQuery bucket={this.state.selectedBucket} />
162+
}
152163
}
153164
case 6: {
154-
return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
165+
if (isFlagEnabled('ioxOnboarding')) {
166+
return (
167+
<Finish
168+
wizardEventName="cliWizard"
169+
markStepAsCompleted={this.handleMarkStepAsCompleted}
170+
finishStepCompleted={this.state.finishStepCompleted}
171+
finalFeedback={this.state.finalFeedback}
172+
setFinalFeedback={this.setFinalFeedback}
173+
/>
174+
)
175+
} else {
176+
return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
177+
}
155178
}
156179
case 7: {
157180
return (
@@ -184,7 +207,7 @@ export class CliWizard extends PureComponent<{}, State> {
184207
<SubwayNav
185208
currentStep={this.state.currentStep}
186209
onStepClick={this.handleNavClick}
187-
navigationSteps={HOMEPAGE_NAVIGATION_STEPS_SHORT}
210+
navigationSteps={this.subwayNavSteps}
188211
settingUpIcon={CLIIcon}
189212
settingUpText="InfluxDB CLI"
190213
setupTime="5 minutes"
@@ -198,8 +221,7 @@ export class CliWizard extends PureComponent<{}, State> {
198221
{
199222
verticallyCentered:
200223
this.state.currentStep === 1 ||
201-
this.state.currentStep ===
202-
HOMEPAGE_NAVIGATION_STEPS_SHORT.length,
224+
this.state.currentStep === this.subwayNavSteps.length,
203225
}
204226
)}
205227
>
@@ -227,8 +249,7 @@ export class CliWizard extends PureComponent<{}, State> {
227249
size={ComponentSize.Large}
228250
color={ComponentColor.Primary}
229251
status={
230-
this.state.currentStep <
231-
HOMEPAGE_NAVIGATION_STEPS_SHORT.length
252+
this.state.currentStep < this.subwayNavSteps.length
232253
? ComponentStatus.Default
233254
: ComponentStatus.Disabled
234255
}

‎src/homepageExperience/utils.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,33 @@ export const HOMEPAGE_NAVIGATION_STEPS_SHORT = [
9797
},
9898
]
9999

100+
export const HOMEPAGE_NAVIGATION_STEPS_SHORT_SQL = [
101+
{
102+
name: 'Overview',
103+
glyph: IconFont.BookOutline,
104+
},
105+
{
106+
name: 'Install Dependencies',
107+
glyph: IconFont.Install,
108+
},
109+
{
110+
name: 'Initialize Client',
111+
glyph: IconFont.CogSolid_New,
112+
},
113+
{
114+
name: 'Write Data',
115+
glyph: IconFont.Pencil,
116+
},
117+
{
118+
name: 'Execute a SQL Query',
119+
glyph: IconFont.Play,
120+
},
121+
{
122+
name: 'Finish',
123+
glyph: IconFont.StarSmile,
124+
},
125+
]
126+
100127
export const HOMEPAGE_NAVIGATION_STEPS_ARDUINO = [
101128
{
102129
name: 'Overview',

0 commit comments

Comments
 (0)