Skip to content

Commit cec6784

Browse files
alexjw3alex wang
alexjw3
and
alex wang
authored
feat: install dependencies page for CLI (#5131)
* feat: install dependencies page for CLI * feat: updating install dependencies, CLI * feat: updating install dependencies, CLI * feat: prettier Co-authored-by: alex wang <alexwang@alexs-MBP.localdomain>
1 parent 4f0b814 commit cec6784

File tree

1 file changed

+301
-0
lines changed

1 file changed

+301
-0
lines changed

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

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,301 @@
1+
import CodeSnippet from 'src/shared/components/CodeSnippet'
2+
import {SafeBlankLink} from 'src/utils/SafeBlankLink'
3+
import {
4+
ComponentColor,
5+
Button,
6+
ButtonGroup,
7+
Orientation,
8+
Table,
9+
BorderType,
10+
} from '@influxdata/clockface'
11+
12+
import React, {FC, useEffect, useState} from 'react'
13+
import {useDispatch} from 'react-redux'
14+
import {getBuckets} from 'src/buckets/actions/thunks'
15+
import {event} from 'src/cloud/utils/reporting'
16+
17+
export const InstallDependencies: FC = () => {
18+
const dispatch = useDispatch()
19+
20+
useEffect(() => {
21+
dispatch(getBuckets())
22+
}, [])
23+
24+
const headingWithMargin = {marginTop: '48px', marginBottom: '0px'}
25+
26+
const logCopyCodeSnippetMac = () => {
27+
event('firstMile.cliWizard.installDependenciesMac.code.copied')
28+
}
29+
const logCopyCodeSnippetWindows = () => {
30+
event('firstMile.cliWizard.installDependenciesWindows.code.copied')
31+
}
32+
const logCopyCodeSnippetLinux = () => {
33+
event('firstMile.cliWizard.installDependenciesLinux.code.copied')
34+
}
35+
36+
const windowsCodeSnippet =
37+
"> Expand-Archive .\\influxdb2-client-latest-amd64.zip -DestinationPath 'C:\\Program Files\\InfluxData\\'\n" +
38+
"> mv 'C:\\Program Files\\InfluxData\\influxdb2-client-latest-windows-amd64' 'C:\\Program Files\\InfluxData\\influx'"
39+
const linuxCodeSnippetA = `# amd64
40+
wget https://dl.influxdata.com/influxdb/releases/influxdb2-client-latest-linux-amd64.tar.gz
41+
42+
# arm
43+
wget https://dl.influxdata.com/influxdb/releases/influxdb2-client-latest-linux-arm64.tar.gz
44+
`
45+
const linuxCodeSnippetB = `# amd64
46+
tar xvzf path/to/influxdb2-client-latest-linux-amd64.tar.gz
47+
48+
# arm
49+
tar xvzf path/to/influxdb2-client-latest-linux-arm64.tar.gz
50+
`
51+
const linuxCodeSnippetC = `# amd64
52+
sudo cp influxdb2-client-latest-linux-amd64/influx /usr/local/bin/
53+
54+
# arm
55+
sudo cp influxdb2-client-latest-linux-arm64/influx /usr/local/bin/
56+
`
57+
58+
type CurrentOSSelection = 'Linux' | 'Mac' | 'Windows'
59+
const [currentSelection, setCurrentSelection] = useState<CurrentOSSelection>(
60+
'Mac'
61+
)
62+
63+
return (
64+
<>
65+
<h1>Install Dependencies</h1>
66+
<ButtonGroup orientation={Orientation.Horizontal}>
67+
<Button
68+
text="mac OS"
69+
color={
70+
currentSelection === 'Mac'
71+
? ComponentColor.Primary
72+
: ComponentColor.Default
73+
}
74+
onClick={() => {
75+
setCurrentSelection('Mac')
76+
}}
77+
/>
78+
<Button
79+
text="windows"
80+
color={
81+
currentSelection === 'Windows'
82+
? ComponentColor.Primary
83+
: ComponentColor.Default
84+
}
85+
onClick={() => {
86+
setCurrentSelection('Windows')
87+
}}
88+
/>
89+
<Button
90+
text="linux"
91+
color={
92+
currentSelection === 'Linux'
93+
? ComponentColor.Primary
94+
: ComponentColor.Default
95+
}
96+
onClick={() => {
97+
setCurrentSelection('Linux')
98+
}}
99+
/>
100+
</ButtonGroup>
101+
{currentSelection === 'Mac' && (
102+
<>
103+
<h2 style={headingWithMargin}>Use Homebrew</h2>
104+
<CodeSnippet
105+
text="brew install influxdb-cli"
106+
onCopy={logCopyCodeSnippetMac}
107+
language="properties"
108+
/>
109+
<p>
110+
If you prefer to manually download and install the CLI package,
111+
follow our{' '}
112+
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/tools/influx-cli/">
113+
documentation.
114+
</SafeBlankLink>{' '}
115+
</p>
116+
<h2 style={headingWithMargin}>Useful InfluxCLI commands</h2>
117+
<p>
118+
To invoke a command, use the following format in the command line:
119+
</p>
120+
<p style={{marginLeft: '40px'}}>influx [command]</p>
121+
<Table borders={BorderType.All}>
122+
<Table.Body>
123+
<Table.Row>
124+
<Table.Cell>bucket</Table.Cell>
125+
<Table.Cell>Bucket management commands</Table.Cell>
126+
</Table.Row>
127+
<Table.Row>
128+
<Table.Cell>export</Table.Cell>
129+
<Table.Cell>Export resources as a template</Table.Cell>
130+
</Table.Row>
131+
<Table.Row>
132+
<Table.Cell>help</Table.Cell>
133+
<Table.Cell>List all commands</Table.Cell>
134+
</Table.Row>
135+
<Table.Row>
136+
<Table.Cell>help [command]</Table.Cell>
137+
<Table.Cell>Get help with an individual command</Table.Cell>
138+
</Table.Row>
139+
<Table.Row>
140+
<Table.Cell>query</Table.Cell>
141+
<Table.Cell>Execute a Flux query</Table.Cell>
142+
</Table.Row>
143+
<Table.Row>
144+
<Table.Cell>write</Table.Cell>
145+
<Table.Cell>Write points to InfluxDB</Table.Cell>
146+
</Table.Row>
147+
</Table.Body>
148+
</Table>
149+
<p>
150+
Full list of commands is available in our{' '}
151+
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/reference/cli/influx/">
152+
documentation.
153+
</SafeBlankLink>{' '}
154+
</p>
155+
</>
156+
)}
157+
{currentSelection === 'Windows' && (
158+
<>
159+
<h2 style={headingWithMargin}>Download the CLI package</h2>
160+
<p>
161+
{' '}
162+
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/tools/influx-cli/?t=Windows">
163+
Download via our documentation.
164+
</SafeBlankLink>{' '}
165+
</p>
166+
<h2 style={headingWithMargin}>Expand the downloaded archive</h2>
167+
<p>
168+
Expand the downloaded archive into C:\Program Files\InfluxData\ and
169+
rename it if desired
170+
</p>
171+
<CodeSnippet
172+
text={windowsCodeSnippet}
173+
onCopy={logCopyCodeSnippetWindows}
174+
language="properties"
175+
/>
176+
<h2 style={headingWithMargin}>Grant network access (optional)</h2>
177+
<p>To grant the InfluxCLI the required access, do the following:</p>
178+
<p>1. Select Private networks, such as my home or work network </p>
179+
<p>2. Click Allow access</p>
180+
<h2 style={headingWithMargin}>Useful InfluxCLI commands</h2>
181+
<p>
182+
To invoke a command, use the following format in the command line:
183+
</p>
184+
<p style={{marginLeft: '40px'}}>influx [command]</p>
185+
<Table borders={BorderType.All}>
186+
<Table.Body>
187+
<Table.Row>
188+
<Table.Cell>bucket</Table.Cell>
189+
<Table.Cell>Bucket management commands</Table.Cell>
190+
</Table.Row>
191+
<Table.Row>
192+
<Table.Cell>export</Table.Cell>
193+
<Table.Cell>Export resources as a template</Table.Cell>
194+
</Table.Row>
195+
<Table.Row>
196+
<Table.Cell>help</Table.Cell>
197+
<Table.Cell>List all commands</Table.Cell>
198+
</Table.Row>
199+
<Table.Row>
200+
<Table.Cell>help [command]</Table.Cell>
201+
<Table.Cell>Get help with an individual command</Table.Cell>
202+
</Table.Row>
203+
<Table.Row>
204+
<Table.Cell>query</Table.Cell>
205+
<Table.Cell>Execute a Flux query</Table.Cell>
206+
</Table.Row>
207+
<Table.Row>
208+
<Table.Cell>write</Table.Cell>
209+
<Table.Cell>Write points to InfluxDB</Table.Cell>
210+
</Table.Row>
211+
</Table.Body>
212+
</Table>
213+
<p>
214+
Full list of commands is available in our{' '}
215+
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/reference/cli/influx/">
216+
documentation.
217+
</SafeBlankLink>{' '}
218+
</p>
219+
</>
220+
)}
221+
{currentSelection === 'Linux' && (
222+
<>
223+
<h2 style={headingWithMargin}>Download from the command line</h2>
224+
<CodeSnippet
225+
text={linuxCodeSnippetA}
226+
onCopy={logCopyCodeSnippetLinux}
227+
language="properties"
228+
/>
229+
<p>
230+
If you prefer to manually download and install the CLI package,
231+
follow our{' '}
232+
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/tools/influx-cli/?t=Linux">
233+
documentation.
234+
</SafeBlankLink>{' '}
235+
</p>
236+
<h2 style={headingWithMargin}>Unpackage the downloaded package</h2>
237+
<p>
238+
Install the downloaded InfluxDB client package. Adjust filenames,
239+
paths, and utilities as needed.
240+
</p>
241+
<CodeSnippet
242+
text={linuxCodeSnippetB}
243+
onCopy={logCopyCodeSnippetLinux}
244+
language="properties"
245+
/>
246+
<h2 style={headingWithMargin}>
247+
Place the executable in your $PATH (optional)
248+
</h2>
249+
<p>
250+
If you do not move the influx binary into your $PATH, prefix the
251+
executable ./ to run it in place.
252+
</p>
253+
<CodeSnippet
254+
text={linuxCodeSnippetC}
255+
onCopy={logCopyCodeSnippetLinux}
256+
language="properties"
257+
/>
258+
<h2 style={headingWithMargin}>Useful InfluxCLI commands</h2>
259+
<p>
260+
To invoke a command, use the following format in the command line:
261+
</p>
262+
<p style={{marginLeft: '40px'}}>influx [command]</p>
263+
<Table borders={BorderType.All}>
264+
<Table.Body>
265+
<Table.Row>
266+
<Table.Cell>bucket</Table.Cell>
267+
<Table.Cell>Bucket management commands</Table.Cell>
268+
</Table.Row>
269+
<Table.Row>
270+
<Table.Cell>export</Table.Cell>
271+
<Table.Cell>Export resources as a template</Table.Cell>
272+
</Table.Row>
273+
<Table.Row>
274+
<Table.Cell>help</Table.Cell>
275+
<Table.Cell>List all commands</Table.Cell>
276+
</Table.Row>
277+
<Table.Row>
278+
<Table.Cell>help [command]</Table.Cell>
279+
<Table.Cell>Get help with an individual command</Table.Cell>
280+
</Table.Row>
281+
<Table.Row>
282+
<Table.Cell>query</Table.Cell>
283+
<Table.Cell>Execute a Flux query</Table.Cell>
284+
</Table.Row>
285+
<Table.Row>
286+
<Table.Cell>write</Table.Cell>
287+
<Table.Cell>Write points to InfluxDB</Table.Cell>
288+
</Table.Row>
289+
</Table.Body>
290+
</Table>
291+
<p>
292+
Full list of commands is available in our{' '}
293+
<SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/reference/cli/influx/">
294+
documentation.
295+
</SafeBlankLink>{' '}
296+
</p>
297+
</>
298+
)}
299+
</>
300+
)
301+
}

0 commit comments

Comments
 (0)