Skip to content

Commit e894103

Browse files
blegesse-wblegesse-w
authored
feat(cliWizard): additional eventing for cli (#5275)
1 parent f68a687 commit e894103

File tree

3 files changed

+79
-47
lines changed

3 files changed

+79
-47
lines changed

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,12 @@ export const ExecuteQuery = (props: OwnProps) => {
4848
<p>
4949
Now let's query the data we wrote into the database. We use the Flux
5050
scripting language to query data.{' '}
51-
<SafeBlankLink href="https://docs.influxdata.com/influxdb/v2.2/reference/syntax/flux/">
51+
<SafeBlankLink
52+
href="https://docs.influxdata.com/influxdb/v2.2/reference/syntax/flux/"
53+
onClick={() =>
54+
event('firstMile.cliWizard.documentation.link.clicked')
55+
}
56+
>
5257
Flux
5358
</SafeBlankLink>{' '}
5459
is designed for querying, analyzing, and acting on data.

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

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,12 @@ export const InstallDependencies: FC = () => {
2424

2525
const headingWithMargin = {marginTop: '48px', marginBottom: '0px'}
2626

27-
const logCopyCodeSnippetMac = () => {
28-
event('firstMile.cliWizard.installDependenciesMac.code.copied')
27+
const logCopyCodeSnippet = OS => {
28+
event(`firstMile.cliWizard.installDependencies${OS}.code.copied`)
2929
}
30-
const logCopyCodeSnippetWindows = () => {
31-
event('firstMile.cliWizard.installDependenciesWindows.code.copied')
32-
}
33-
const logCopyCodeSnippetLinux = () => {
34-
event('firstMile.cliWizard.installDependenciesLinux.code.copied')
30+
31+
const handleEventing = () => {
32+
event('firstMile.cliWizard.documentation.link.clicked')
3533
}
3634

3735
const windowsCodeSnippet =
@@ -67,22 +65,22 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
6765
keyboardCopyTriggered(event) &&
6866
userSelection().includes('brew install')
6967
) {
70-
logCopyCodeSnippetMac()
68+
logCopyCodeSnippet('Mac')
7169
}
7270
if (
7371
keyboardCopyTriggered(event) &&
7472
(userSelection().includes('Expand-Archive') ||
7573
userSelection().includes('mv'))
7674
) {
77-
logCopyCodeSnippetWindows()
75+
logCopyCodeSnippet('Windows')
7876
}
7977
if (
8078
keyboardCopyTriggered(event) &&
8179
(userSelection().includes('wget') ||
8280
userSelection().includes('tar') ||
8381
userSelection().includes('sudo'))
8482
) {
85-
logCopyCodeSnippetLinux()
83+
logCopyCodeSnippet('Linux')
8684
}
8785
}
8886
document.addEventListener('keydown', fireKeyboardCopyEvent)
@@ -132,13 +130,16 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
132130
<h2 style={headingWithMargin}>Use Homebrew</h2>
133131
<CodeSnippet
134132
text="brew install influxdb-cli"
135-
onCopy={logCopyCodeSnippetMac}
133+
onCopy={() => logCopyCodeSnippet(currentSelection)}
136134
language="properties"
137135
/>
138136
<p>
139137
If you prefer to manually download and install the CLI package,
140138
follow our{' '}
141-
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/tools/influx-cli/">
139+
<SafeBlankLink
140+
href="https://docs.influxdata.com/influxdb/cloud/tools/influx-cli/"
141+
onClick={handleEventing}
142+
>
142143
documentation.
143144
</SafeBlankLink>{' '}
144145
</p>
@@ -177,7 +178,10 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
177178
</Table>
178179
<p>
179180
Full list of commands is available in our{' '}
180-
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/reference/cli/influx/">
181+
<SafeBlankLink
182+
href="https://docs.influxdata.com/influxdb/cloud/reference/cli/influx/"
183+
onClick={handleEventing}
184+
>
181185
documentation.
182186
</SafeBlankLink>{' '}
183187
</p>
@@ -188,7 +192,10 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
188192
<h2 style={headingWithMargin}>Download the CLI package</h2>
189193
<p>
190194
{' '}
191-
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/tools/influx-cli/?t=Windows">
195+
<SafeBlankLink
196+
href="https://docs.influxdata.com/influxdb/cloud/tools/influx-cli/?t=Windows"
197+
onClick={handleEventing}
198+
>
192199
Download via our documentation.
193200
</SafeBlankLink>{' '}
194201
</p>
@@ -199,7 +206,7 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
199206
</p>
200207
<CodeSnippet
201208
text={windowsCodeSnippet}
202-
onCopy={logCopyCodeSnippetWindows}
209+
onCopy={() => logCopyCodeSnippet(currentSelection)}
203210
language="properties"
204211
/>
205212
<h2 style={headingWithMargin}>Grant network access (optional)</h2>
@@ -243,7 +250,10 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
243250
</Table>
244251
<p>
245252
Full list of commands is available in our{' '}
246-
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/reference/cli/influx/">
253+
<SafeBlankLink
254+
href="https://docs.influxdata.com/influxdb/cloud/reference/cli/influx/"
255+
onClick={handleEventing}
256+
>
247257
documentation.
248258
</SafeBlankLink>{' '}
249259
</p>
@@ -254,13 +264,16 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
254264
<h2 style={headingWithMargin}>Download from the command line</h2>
255265
<CodeSnippet
256266
text={linuxCodeSnippetA}
257-
onCopy={logCopyCodeSnippetLinux}
267+
onCopy={() => logCopyCodeSnippet(currentSelection)}
258268
language="properties"
259269
/>
260270
<p>
261271
If you prefer to manually download and install the CLI package,
262272
follow our{' '}
263-
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/tools/influx-cli/?t=Linux">
273+
<SafeBlankLink
274+
href="https://docs.influxdata.com/influxdb/cloud/tools/influx-cli/?t=Linux"
275+
onClick={handleEventing}
276+
>
264277
documentation.
265278
</SafeBlankLink>{' '}
266279
</p>
@@ -271,7 +284,7 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
271284
</p>
272285
<CodeSnippet
273286
text={linuxCodeSnippetB}
274-
onCopy={logCopyCodeSnippetLinux}
287+
onCopy={() => logCopyCodeSnippet(currentSelection)}
275288
language="properties"
276289
/>
277290
<h2 style={headingWithMargin}>
@@ -283,7 +296,7 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
283296
</p>
284297
<CodeSnippet
285298
text={linuxCodeSnippetC}
286-
onCopy={logCopyCodeSnippetLinux}
299+
onCopy={() => logCopyCodeSnippet(currentSelection)}
287300
language="properties"
288301
/>
289302
<h2 style={headingWithMargin}>Useful InfluxDB CLI commands</h2>
@@ -321,7 +334,10 @@ sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
321334
</Table>
322335
<p>
323336
Full list of commands is available in our{' '}
324-
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/reference/cli/influx/">
337+
<SafeBlankLink
338+
href="https://docs.influxdata.com/influxdb/cloud/reference/cli/influx/"
339+
onClick={handleEventing}
340+
>
325341
documentation.
326342
</SafeBlankLink>{' '}
327343
</p>

‎src/homepageExperience/containers/CliWizard.tsx‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataD
2626
// Utils
2727
import {event} from 'src/cloud/utils/reporting'
2828
import {HOMEPAGE_NAVIGATION_STEPS_SHORT} from 'src/homepageExperience/utils'
29+
import {normalizeEventName} from 'src/cloud/utils/reporting'
2930
import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
3031

3132
interface State {
@@ -62,44 +63,54 @@ export class CliWizard extends PureComponent<{}, State> {
6263
}
6364

6465
handleNextClick = () => {
65-
this.setState(
66+
this.setState({
67+
currentStep: Math.min(
68+
this.state.currentStep + 1,
69+
HOMEPAGE_NAVIGATION_STEPS_SHORT.length
70+
),
71+
})
72+
73+
event(
74+
'firstMile.cliWizard.next.clicked',
75+
{},
6676
{
67-
currentStep: Math.min(
68-
this.state.currentStep + 1,
69-
HOMEPAGE_NAVIGATION_STEPS_SHORT.length
77+
clickedButtonAtStep: normalizeEventName(
78+
HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep - 1].name
79+
),
80+
currentStep: normalizeEventName(
81+
HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep].name
7082
),
71-
},
72-
() => {
73-
event(
74-
'firstMile.cliWizard.next.clicked',
75-
{},
76-
{
77-
clickedButtonAtStep: this.state.currentStep - 1,
78-
currentStep: this.state.currentStep,
79-
}
80-
)
8183
}
8284
)
8385
}
8486

8587
handlePreviousClick = () => {
86-
this.setState(
87-
{currentStep: Math.max(this.state.currentStep - 1, 1)},
88-
() => {
89-
event(
90-
'firstMile.cliWizard.previous.clicked',
91-
{},
92-
{
93-
clickedButtonAtStep: this.state.currentStep + 1,
94-
currentStep: this.state.currentStep,
95-
}
96-
)
88+
this.setState({currentStep: Math.max(this.state.currentStep - 1, 1)})
89+
event(
90+
'firstMile.cliWizard.previous.clicked',
91+
{},
92+
{
93+
clickedButtonAtStep: normalizeEventName(
94+
HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep + 1].name
95+
),
96+
currentStep: normalizeEventName(
97+
HOMEPAGE_NAVIGATION_STEPS_SHORT[this.state.currentStep].name
98+
),
9799
}
98100
)
99101
}
100102

101103
handleNavClick = (clickedStep: number) => {
102104
this.setState({currentStep: clickedStep})
105+
event(
106+
'firstMile.cliWizard.subNav.clicked',
107+
{},
108+
{
109+
currentStep: normalizeEventName(
110+
HOMEPAGE_NAVIGATION_STEPS_SHORT[clickedStep - 1].name
111+
),
112+
}
113+
)
103114
}
104115

105116
renderStep = () => {

0 commit comments

Comments
 (0)