Skip to content

Commit b930e9a

Browse files
NikhilShahiNikhilShahi
authored
add manual deploy steps to aws and gcp connections (#114)
1 parent 5eeed7e commit b930e9a

File tree

3 files changed

+222
-64
lines changed

3 files changed

+222
-64
lines changed

‎frontend/src/components/ConnectionDocs/docs/aws.tsx

Lines changed: 218 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -6,78 +6,233 @@ import {
66
Select,
77
Button,
88
HStack,
9+
Badge,
910
} from "@chakra-ui/react"
1011
import { CgArrowRight } from "@react-icons/all-files/cg/CgArrowRight"
1112
import { ListNumber } from "components/utils/ListNumber"
1213
import { useState } from "react"
13-
import { getAWSIngestorLaunchStackURL, INGESTOR_AWS_REGIONS } from "~/constants"
14+
import {
15+
getAWSIngestorLaunchStackURL,
16+
INGESTOR_AWS_REGIONS,
17+
getAWSDeployAmiURL,
18+
} from "~/constants"
1419

1520
const AWSDocs = () => {
16-
const [selectedRegion, setSelectedRegion] = useState("us-west-2")
21+
const [selectedRegion, setSelectedRegion] = useState("")
22+
const [deployRegion, setDeployRegion] = useState("")
23+
const [manual, setManual] = useState(false)
24+
1725
return (
1826
<>
1927
<VStack spacing={6} w="full">
20-
<ListNumber num={1} title="Deploy a Metlo Traffic Mirroring Instance">
21-
<Text>
22-
You can use one of our Cloud Formation stacks to deploy in the
23-
region you would like to mirror.
24-
</Text>
25-
<HStack>
26-
<Select
27-
defaultValue={"us-west-2"}
28-
w="200px"
29-
onChange={e => setSelectedRegion(e.target.value)}
30-
>
31-
{INGESTOR_AWS_REGIONS.map(e => (
32-
<option key={e} value={e}>
33-
{e}
34-
</option>
35-
))}
36-
</Select>
37-
<Button
38-
as="a"
39-
colorScheme="blue"
40-
target="_blank"
41-
rightIcon={<CgArrowRight />}
42-
href={getAWSIngestorLaunchStackURL(selectedRegion)}
43-
>
44-
Launch Stack
45-
</Button>
46-
</HStack>
47-
</ListNumber>
48-
<ListNumber num={2} title="Install Metlo's CLI Tool">
49-
<Text>
50-
Once the instance is created, you can start traffic mirroring using
51-
Metlo&apos;s CLI Tool. You can install metlo from npm by running the
52-
following:
53-
</Text>
54-
<Code w={"full"} p={2}>
55-
$ npm i -g @metlo/cli
56-
</Code>
57-
</ListNumber>
58-
<ListNumber num={3} title="Set up Traffic Mirroring">
59-
<Text>To set up traffic mirroring run the following:</Text>
60-
<Code w={"full"} p={2}>
61-
<VStack>
62-
<Box w={"full"}>$ metlo traffic-mirror aws new</Box>
63-
<Box w={"full"}>✔ Select your AWS region · us-west-2 ✔</Box>
64-
<Box w={"full"}>
65-
✔ What type of source do you want to mirror? · instance
66-
</Box>
67-
<Box w={"full"}>
68-
✔ Enter the id of your source ·i-xxxxxxxxxxxxxxxxx
69-
</Box>
70-
<Box w={"full"}>Finding Source...</Box>
71-
<Box w={"full"}>Success!</Box>
72-
<Box w={"full"}>
73-
✔ Enter the id of your Metlo Mirroring Instance: ·
74-
i-xxxxxxxxxxxxxxxxx
75-
</Box>
76-
<Box w={"full"}>Creating Mirror Session</Box>
77-
<Box w={"full"}>... Success!</Box>
78-
</VStack>
79-
</Code>
80-
</ListNumber>
28+
<HStack spacing="0" width="full" alignItems="start">
29+
<Badge
30+
as="button"
31+
onClick={() => setManual(false)}
32+
roundedLeft="md"
33+
p="1"
34+
borderWidth="2px 1px 2px 2px"
35+
colorScheme={manual ? "none" : "gray"}
36+
opacity={manual ? 0.5 : 1}
37+
rounded="none"
38+
>
39+
One Click Deploy
40+
</Badge>
41+
<Badge
42+
as="button"
43+
onClick={() => setManual(true)}
44+
roundedRight="md"
45+
p="1"
46+
borderWidth="2px 2px 2px 1px"
47+
colorScheme={manual ? "gray" : "none"}
48+
opacity={manual ? 1 : 0.5}
49+
rounded="none"
50+
>
51+
Manual Deploy
52+
</Badge>
53+
</HStack>
54+
<VStack w="full" alignItems="start" spacing="8">
55+
{manual ? (
56+
<>
57+
<ListNumber num={1} title="Open Metlo Manager Ports">
58+
<Text>
59+
Open Port 8081 on your Metlo instance to TCP Connections so
60+
you can start collecting traffic data. It should be open to
61+
any machines you want to collect traffic from.
62+
</Text>
63+
</ListNumber>
64+
<ListNumber num={2} title="Deploy a Metlo Mirroring Instance">
65+
Deploy Metlo:
66+
<HStack>
67+
<Select
68+
placeholder="Select region"
69+
defaultValue={deployRegion}
70+
w="200px"
71+
onChange={e => setDeployRegion(e.target.value)}
72+
>
73+
{INGESTOR_AWS_REGIONS.map(e => (
74+
<option key={e} value={e}>
75+
{e}
76+
</option>
77+
))}
78+
</Select>
79+
<Button
80+
as="a"
81+
colorScheme="blue"
82+
target="_blank"
83+
rightIcon={<CgArrowRight />}
84+
pointerEvents={deployRegion === "" ? "none" : "initial"}
85+
href={getAWSDeployAmiURL(deployRegion)}
86+
isDisabled={deployRegion === ""}
87+
>
88+
Deploy
89+
</Button>
90+
</HStack>
91+
<Text>
92+
We have AMI&apos;s ready in different AWS Regions so you can
93+
deploy right away. When setting up your instance open up port
94+
4789 to UDP Connections.
95+
</Text>
96+
<Text>
97+
Under Advanced details {">"} User Data paste the following{" "}
98+
{"("}
99+
replace YOUR_METLO_HOST and YOUR_METLO_API_KEY with the right
100+
values
101+
{")"}:
102+
</Text>
103+
<Code w={"full"} p={2}>
104+
<VStack spacing={0}>
105+
<Box w={"full"}>#!/bin/bash</Box>
106+
<Box w={"full"}>
107+
$ echo &quot;METLO_ADDR=http://{"<"}YOUR_METLO_HOST{">"}
108+
:8081&quot; {">>"} /opt/metlo/credentials
109+
</Box>
110+
<Box w={"full"}>
111+
$ echo &quot;METLO_KEY={"<"}YOUR_METLO_API_KEY{">"}&quot;
112+
{">>"}
113+
/opt/metlo/credentials
114+
</Box>
115+
<Box w={"full"}>
116+
$ sudo systemctl enable metlo-ingestor.service
117+
</Box>
118+
<Box w={"full"}>
119+
$ sudo systemctl start metlo-ingestor.service
120+
</Box>
121+
</VStack>
122+
</Code>
123+
</ListNumber>
124+
<ListNumber num={3} title="Get AWS API Keys">
125+
<Text>
126+
To set up mirroring we need an API Key with the following
127+
permissions:
128+
</Text>
129+
<Text>- AmazonEC2FullAccess</Text>
130+
<Text>- AmazonVPCFullAccess</Text>
131+
</ListNumber>
132+
<ListNumber num={4} title="Install Metlo's CLI Tool">
133+
<Text>
134+
You can install metlo from npm by running the following:
135+
</Text>
136+
<Code w="full" p={2}>
137+
$ npm i -g @metlo/cli
138+
</Code>
139+
</ListNumber>
140+
<ListNumber num={5} title="Set up Traffic Mirroring">
141+
<Text>To set up traffic mirroring run the following:</Text>
142+
<Code w={"full"} p={2}>
143+
<VStack>
144+
<Box w={"full"}>$ metlo traffic-mirror aws new</Box>
145+
<Box w={"full"}>✔ Select your AWS region · us-west-2 ✔</Box>
146+
<Box w={"full"}>
147+
✔ What type of source do you want to mirror? · instance
148+
</Box>
149+
<Box w={"full"}>
150+
✔ Enter the id of your source ·i-xxxxxxxxxxxxxxxxx
151+
</Box>
152+
<Box w={"full"}>Finding Source...</Box>
153+
<Box w={"full"}>Success!</Box>
154+
<Box w={"full"}>
155+
✔ Enter the id of your Metlo Mirroring Instance: ·
156+
i-xxxxxxxxxxxxxxxxx
157+
</Box>
158+
<Box w={"full"}>Creating Mirror Session</Box>
159+
<Box w={"full"}>... Success!</Box>
160+
</VStack>
161+
</Code>
162+
</ListNumber>
163+
</>
164+
) : (
165+
<>
166+
<ListNumber
167+
num={1}
168+
title="Deploy a Metlo Traffic Mirroring Instance"
169+
>
170+
<Text>
171+
You can use one of our Cloud Formation stacks to deploy in the
172+
region you would like to mirror.
173+
</Text>
174+
<HStack>
175+
<Select
176+
placeholder="Select region"
177+
defaultValue={selectedRegion}
178+
w="200px"
179+
onChange={e => setSelectedRegion(e.target.value)}
180+
>
181+
{INGESTOR_AWS_REGIONS.map(e => (
182+
<option key={e} value={e}>
183+
{e}
184+
</option>
185+
))}
186+
</Select>
187+
<Button
188+
as="a"
189+
colorScheme="blue"
190+
target="_blank"
191+
rightIcon={<CgArrowRight />}
192+
pointerEvents={selectedRegion === "" ? "none" : "initial"}
193+
href={getAWSIngestorLaunchStackURL(selectedRegion)}
194+
isDisabled={selectedRegion === ""}
195+
>
196+
Launch Stack
197+
</Button>
198+
</HStack>
199+
</ListNumber>
200+
<ListNumber num={2} title="Install Metlo's CLI Tool">
201+
<Text>
202+
Once the instance is created, you can start traffic mirroring
203+
using Metlo&apos;s CLI Tool. You can install metlo from npm by
204+
running the following:
205+
</Text>
206+
<Code w={"full"} p={2}>
207+
$ npm i -g @metlo/cli
208+
</Code>
209+
</ListNumber>
210+
<ListNumber num={3} title="Set up Traffic Mirroring">
211+
<Text>To set up traffic mirroring run the following:</Text>
212+
<Code w={"full"} p={2}>
213+
<VStack>
214+
<Box w={"full"}>$ metlo traffic-mirror aws new</Box>
215+
<Box w={"full"}>✔ Select your AWS region · us-west-2 ✔</Box>
216+
<Box w={"full"}>
217+
✔ What type of source do you want to mirror? · instance
218+
</Box>
219+
<Box w={"full"}>
220+
✔ Enter the id of your source ·i-xxxxxxxxxxxxxxxxx
221+
</Box>
222+
<Box w={"full"}>Finding Source...</Box>
223+
<Box w={"full"}>Success!</Box>
224+
<Box w={"full"}>
225+
✔ Enter the id of your Metlo Mirroring Instance: ·
226+
i-xxxxxxxxxxxxxxxxx
227+
</Box>
228+
<Box w={"full"}>Creating Mirror Session</Box>
229+
<Box w={"full"}>... Success!</Box>
230+
</VStack>
231+
</Code>
232+
</ListNumber>
233+
</>
234+
)}
235+
</VStack>
81236
</VStack>
82237
</>
83238
)

‎frontend/src/components/ConnectionDocs/docs/gcp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const GCPDocs = () => {
44
return (
55
<>
66
<VStack w={"full"} spacing={6}>
7-
<ListNumber num={1} title="Install Metlo's CLI Tool">
7+
<ListNumber num={1} title="Install Metlo's CLI Tool">
88
<Text>You can install metlo from npm by running the following:</Text>
99
<Code w={"full"} p={2}>
1010
$ npm i -g @metlo/cli

‎frontend/src/constants.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,6 @@ export const INGESTOR_STACK_NAME = "metlo-ingestor"
9999

100100
export const getAWSIngestorLaunchStackURL = (region: string) =>
101101
`https://${region}.console.aws.amazon.com/cloudformation/home?region=${region}#/stacks/create/review?templateURL=${INGESTOR_AWS_TEMPLATE}&stackName=${INGESTOR_STACK_NAME}`
102+
103+
export const getAWSDeployAmiURL = (region: string) =>
104+
`https://backend.metlo.com/traffic-mirror/aws?region=${region}`

0 commit comments

Comments
 (0)