From 8b54c44514621dff5bd7b99d5cf7f1641b29ace9 Mon Sep 17 00:00:00 2001
From: Akshay Shekhawat <akshay.shekhawat@gmail.com>
Date: Thu, 17 Nov 2022 14:57:55 -0800
Subject: [PATCH] Clean Up Docs (#130)

---
 .../components/ConnectionDocs/docs/aws.tsx    | 57 ++++++++++++-------
 .../components/ConnectionDocs/docs/gcp.tsx    |  4 +-
 .../components/ConnectionDocs/docs/java.tsx   |  2 +-
 .../ConnectionDocs/docs/kubernetes.tsx        | 14 -----
 .../components/ConnectionDocs/docs/node.tsx   |  4 +-
 .../components/ConnectionDocs/docs/python.tsx |  8 +--
 .../src/components/ConnectionDocs/index.tsx   | 34 +----------
 frontend/src/pages/connections/index.tsx      | 10 +++-
 8 files changed, 54 insertions(+), 79 deletions(-)

diff --git a/frontend/src/components/ConnectionDocs/docs/aws.tsx b/frontend/src/components/ConnectionDocs/docs/aws.tsx
index 5184aeb1..3462f683 100644
--- a/frontend/src/components/ConnectionDocs/docs/aws.tsx
+++ b/frontend/src/components/ConnectionDocs/docs/aws.tsx
@@ -7,7 +7,9 @@ import {
   Button,
   HStack,
   Badge,
+  Link,
 } from "@chakra-ui/react"
+import { ExternalLinkIcon } from "@chakra-ui/icons"
 import { CgArrowRight } from "@react-icons/all-files/cg/CgArrowRight"
 import { ListNumber } from "components/utils/ListNumber"
 import { useEffect, useState } from "react"
@@ -17,6 +19,31 @@ import {
   getAWSDeployAmiURL,
 } from "~/constants"
 
+const KeyStep = ({ num }: { num: number }) => (
+  <ListNumber num={num} title="Get AWS API Keys">
+    <Text>
+      To set up mirroring we need an API Key with the following permissions:
+    </Text>
+    <Text>- AmazonEC2FullAccess</Text>
+    <Text>- AmazonVPCFullAccess</Text>
+    <Text>
+      You can use the{" "}
+      <a href="https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html">
+        <Code fontWeight="semibold">aws configure</Code>
+      </a>{" "}
+      command or{" "}
+      <Link
+        href="https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-envvars.html"
+        fontWeight="semibold"
+        isExternal
+      >
+        Environment Variables
+        <ExternalLinkIcon mx="2px" />
+      </Link>{" "}
+      to configure AWS.
+    </Text>
+  </ListNumber>
+)
 const LOCAL_DOMAINS = ["localhost", "127.0.0.1", "", "::1"]
 
 const AWSDocs = () => {
@@ -65,14 +92,10 @@ const AWSDocs = () => {
         <VStack w="full" alignItems="start" spacing="8">
           {manual ? (
             <>
-              <ListNumber num={1} title="Open Metlo Manager Ports">
-                <Text>
-                  Open Port 8081 on your Metlo instance to TCP Connections so
-                  you can start collecting traffic data. It should be open to
-                  any machines you want to collect traffic from.
-                </Text>
-              </ListNumber>
-              <ListNumber num={2} title="Deploy a Metlo Mirroring Instance">
+              <ListNumber
+                num={1}
+                title="Deploy a Metlo Traffic Mirroring Instance"
+              >
                 Deploy Metlo:
                 <HStack>
                   <Select
@@ -132,15 +155,8 @@ const AWSDocs = () => {
                   </VStack>
                 </Code>
               </ListNumber>
-              <ListNumber num={3} title="Get AWS API Keys">
-                <Text>
-                  To set up mirroring we need an API Key with the following
-                  permissions:
-                </Text>
-                <Text>- AmazonEC2FullAccess</Text>
-                <Text>- AmazonVPCFullAccess</Text>
-              </ListNumber>
-              <ListNumber num={4} title="Install Metlo's CLI Tool">
+              <KeyStep num={2} />
+              <ListNumber num={3} title="Install Metlo's CLI Tool">
                 <Text>
                   You can install metlo from npm by running the following:
                 </Text>
@@ -148,7 +164,7 @@ const AWSDocs = () => {
                   $ npm i -g @metlo/cli
                 </Code>
               </ListNumber>
-              <ListNumber num={5} title="Set up Traffic Mirroring">
+              <ListNumber num={4} title="Set up Traffic Mirroring">
                 <Text>To set up traffic mirroring run the following:</Text>
                 <Code w={"full"} p={2}>
                   <VStack>
@@ -211,7 +227,8 @@ const AWSDocs = () => {
                   </Button>
                 </HStack>
               </ListNumber>
-              <ListNumber num={2} title="Install Metlo's CLI Tool">
+              <KeyStep num={2} />
+              <ListNumber num={3} title="Install Metlo's CLI Tool">
                 <Text>
                   Once the instance is created, you can start traffic mirroring
                   using Metlo&apos;s CLI Tool. You can install metlo from npm by
@@ -221,7 +238,7 @@ const AWSDocs = () => {
                   $ npm i -g @metlo/cli
                 </Code>
               </ListNumber>
-              <ListNumber num={3} title="Set up Traffic Mirroring">
+              <ListNumber num={4} title="Set up Traffic Mirroring">
                 <Text>To set up traffic mirroring run the following:</Text>
                 <Code w={"full"} p={2}>
                   <VStack>
diff --git a/frontend/src/components/ConnectionDocs/docs/gcp.tsx b/frontend/src/components/ConnectionDocs/docs/gcp.tsx
index a950c263..c1b9dc52 100644
--- a/frontend/src/components/ConnectionDocs/docs/gcp.tsx
+++ b/frontend/src/components/ConnectionDocs/docs/gcp.tsx
@@ -43,10 +43,10 @@ const GCPDocs = () => {
               <Box w={"full"}>✔ Obtained router details</Box>
               <Box w={"full"}>✔ Mirror Instance Type · e2-standard-2</Box>
               <Box w={"full"}>
-                ✔ Metlo URL · {"<"}METLO_URL_HERE{">"}
+                ✔ Metlo URL · http://{"<"}YOUR_METLO_HOST{">"}:8081
               </Box>
               <Box w={"full"}>
-                ✔ Metlo API Key · {"<"}METLO_API_KEY_HERE{">"}
+                ✔ Metlo API Key · {"<"}YOUR_METLO_API_KEY{">"}
               </Box>
               <Box w={"full"}>✔ Created MIG for metlo</Box>
               <Box w={"full"}>✔ Created health check</Box>
diff --git a/frontend/src/components/ConnectionDocs/docs/java.tsx b/frontend/src/components/ConnectionDocs/docs/java.tsx
index 88d70ad7..d286e8d8 100644
--- a/frontend/src/components/ConnectionDocs/docs/java.tsx
+++ b/frontend/src/components/ConnectionDocs/docs/java.tsx
@@ -119,7 +119,7 @@ const JavaDocs = () => {
                 </Box>
                 <Box w={"full"}>here registrationBean.setFilter(new</Box>
                 <Box w={"full"}>
-                  Metlo(&quot;http://&lt;YOUR_METLO_ADDRESS&gt;:8081&quot;,&quot;&lt;YOUR_METLO_API_KEY&gt;&quot;);
+                  Metlo(&quot;http://&lt;YOUR_METLO_HOST&gt;:8081&quot;,&quot;&lt;YOUR_METLO_API_KEY&gt;&quot;);
                 </Box>
                 <Box w={"full"}>
                   registrationBean.setOrder(2); return registrationBean;
diff --git a/frontend/src/components/ConnectionDocs/docs/kubernetes.tsx b/frontend/src/components/ConnectionDocs/docs/kubernetes.tsx
index 4509437c..18eed11d 100644
--- a/frontend/src/components/ConnectionDocs/docs/kubernetes.tsx
+++ b/frontend/src/components/ConnectionDocs/docs/kubernetes.tsx
@@ -3,20 +3,6 @@ import { Link, Box, Heading, VStack } from "@chakra-ui/react"
 const KubernetesDocs = () => {
   return (
     <VStack spacing={6}>
-      <VStack spacing={3} w={"full"}>
-        <Box w={"full"}>
-          An API key can be generated by going to the
-          <Link href={"/settings"} color={"blue"}>
-            &nbsp;settings tab
-          </Link>
-          &nbsp;in the nav menu, going to the API Keys section and pressing
-          `New` to generate a new API Key
-        </Box>
-        <Box w={"full"}>
-          After you generate an API Key you can set up Metlo as either a
-          daemonset or a sidecar.
-        </Box>
-      </VStack>
       <Heading w={"full"} size={"sm"}>
         Daemonset
       </Heading>
diff --git a/frontend/src/components/ConnectionDocs/docs/node.tsx b/frontend/src/components/ConnectionDocs/docs/node.tsx
index 2907f654..eeb9e742 100644
--- a/frontend/src/components/ConnectionDocs/docs/node.tsx
+++ b/frontend/src/components/ConnectionDocs/docs/node.tsx
@@ -42,8 +42,8 @@ const NodeDocs = () => {
                 <VStack w={"full"}>
                   <Box w={"full"}>var metlo = require(&quot;metlo&quot;)</Box>
                   <Box w={"full"}>
-                    metlo({"<"}YOUR_METLO_API_KEY{">, <"}
-                    YOUR_METLO_COLLECTOR_URL{">"})
+                    metlo({"<"}YOUR_METLO_API_KEY{">, http://<"}
+                    YOUR_METLO_HOST{">:8081"})
                   </Box>
                 </VStack>
               </Code>
diff --git a/frontend/src/components/ConnectionDocs/docs/python.tsx b/frontend/src/components/ConnectionDocs/docs/python.tsx
index b179645f..4f4693b5 100644
--- a/frontend/src/components/ConnectionDocs/docs/python.tsx
+++ b/frontend/src/components/ConnectionDocs/docs/python.tsx
@@ -51,11 +51,11 @@ const PythonDocs = () => {
                     <Box w={"full"}>METLO_CONFIG = {"{"}</Box>
                     <Box w={"full"}>
                       &nbsp;&nbsp;&nbsp;&nbsp;&quot;API_KEY&quot;:
-                      {"<YOUR_METLO_API_KEY>"},
+                      {" <YOUR_METLO_API_KEY>"},
                     </Box>
                     <Box w={"full"}>
                       &nbsp;&nbsp;&nbsp;&nbsp;&quot;METLO_HOST&quot;:
-                      {"<YOUR_METLO_COLLECTOR_URL>"}
+                      {" \"http://<YOUR_METLO_HOST>:8081\""}
                     </Box>
                     <Box w={"full"}>{"}"}</Box>
                   </VStack>
@@ -77,7 +77,7 @@ const PythonDocs = () => {
                   <Box w={"full"}>from metlo.flask import MetloFlask</Box>
                   <Box w={"full"}>app = Flask(__name__)</Box>
                   <Box w={"full"}>
-                    MetloFlask(app, {'"<'}YOUR_METLO_COLLECTOR_URL{'>", "<'}
+                    MetloFlask(app, {'"http://<'}YOUR_METLO_HOST{'>:8081", "<'}
                     YOUR_METLO_API_KEY{'>"'})
                   </Box>
                 </VStack>
@@ -89,7 +89,7 @@ const PythonDocs = () => {
                 communicating with METLO.
               </Box>
               <Code p={2} w={"full"}>
-                MetloFlask(app, {'"<'}YOUR_METLO_COLLECTOR_URL{'>", "<'}
+                MetloFlask(app, {'"http://<'}YOUR_METLO_HOST{'>:8081", "<'}
                 YOUR_METLO_API_KEY{'>",'} workers={'"<'}WORKER-COUNT{'>"'})
               </Code>
             </VStack>
diff --git a/frontend/src/components/ConnectionDocs/index.tsx b/frontend/src/components/ConnectionDocs/index.tsx
index e476e6e3..7a8fbbeb 100644
--- a/frontend/src/components/ConnectionDocs/index.tsx
+++ b/frontend/src/components/ConnectionDocs/index.tsx
@@ -1,9 +1,8 @@
-import React, { useState } from "react"
+import React from "react"
 import {
   Box,
   VStack,
   HStack,
-  useDisclosure,
   Image,
   useColorMode,
   TabPanel,
@@ -13,10 +12,8 @@ import {
   TabPanels,
   Icon,
 } from "@chakra-ui/react"
-import { useRouter } from "next/router"
 import { ConnectionType } from "@common/enums"
 import AWSdocs from "./docs/aws"
-import RenderDocModal from "./renderDocModal"
 import GCPDocs from "./docs/gcp"
 import { FaJava } from "@react-icons/all-files/fa/FaJava"
 import PythonDocs from "./docs/python"
@@ -36,17 +33,7 @@ enum docType {
 }
 
 const ConnectionDocsList: React.FC<ConnectionDocsListProps> = React.memo(() => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
-  const router = useRouter()
   const colorMode = useColorMode()
-  const [displayComponentType, setDisplayComponentType] = useState<docType>(
-    docType.none,
-  )
-
-  const openWithComponent = (componentType: docType) => {
-    setDisplayComponentType(componentType)
-    onOpen()
-  }
 
   return (
     <VStack spacing={12} w={"full"}>
@@ -149,25 +136,6 @@ const ConnectionDocsList: React.FC<ConnectionDocsListProps> = React.memo(() => {
           </TabPanels>
         </Tabs>
       </VStack>
-      <Box>
-        <RenderDocModal
-          isOpen={isOpen}
-          onClose={onClose}
-          type={displayComponentType.toString()}
-          renderComponent={function (): React.ReactElement<
-            any,
-            string | React.JSXElementConstructor<any>
-          > {
-            if (displayComponentType == docType.aws) {
-              return AWSdocs()
-            } else if (displayComponentType == docType.gcp) {
-              return GCPDocs()
-            } else {
-              return <>{displayComponentType}</>
-            }
-          }}
-        />
-      </Box>
     </VStack>
   )
 })
diff --git a/frontend/src/pages/connections/index.tsx b/frontend/src/pages/connections/index.tsx
index 8475284f..8f2b4317 100644
--- a/frontend/src/pages/connections/index.tsx
+++ b/frontend/src/pages/connections/index.tsx
@@ -1,4 +1,4 @@
-import { Heading, VStack } from "@chakra-ui/react"
+import { Heading, Text, VStack, Link } from "@chakra-ui/react"
 import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
 import { SidebarLayoutShell } from "components/SidebarLayoutShell"
 import { ContentContainer } from "components/utils/ContentContainer"
@@ -10,11 +10,15 @@ const Connections = () => {
       title="Connections"
       currentTab={SideNavLinkDestination.Connections}
     >
-      <ContentContainer>
+      <ContentContainer  maxContentW="100rem" px="8" py="8">
         <VStack w="full" alignItems="flex-start">
-          <Heading fontWeight="medium" size="xl" mb="8">
+          <Heading fontWeight="medium" size="xl" mb="2">
             Connections
           </Heading>
+          <Text fontWeight="medium" pb="6">
+            Set up a Connection to send API traffic to Metlo. You can generate
+            an API Key on the <Link href="/settings">settings page.</Link>
+          </Text>
           <ConnectionDocsList />
         </VStack>
       </ContentContainer>