(feature) List GCP connections

metlo-labs · Sep 2, 2022 · f66ad96 · f66ad96
1 parent 6de1618
commit f66ad96
Show file tree

Hide file tree

Showing 5 changed files with 227 additions and 6 deletions.
diff --git a/backend/src/api/connections/index.ts b/backend/src/api/connections/index.ts
@@ -8,13 +8,18 @@ import {
 import ApiResponseHandler from "api-response-handler"
 import { decrypt } from "utils/encryption"
 import { delete_connection as delete_connection_request } from "suricata_setup/"
+import { ConnectionType } from "@common/enums"
 
 const list_connections = async (req: Request, res: Response) => {
   try {
     const connections = (await list_connections_service()).map(v => {
-      delete v.aws.keypair
-      delete v.aws.access_id
-      delete v.aws.secret_access_key
+      if (v.connectionType === ConnectionType.AWS) {
+        delete v.aws.keypair
+        delete v.aws.access_id
+        delete v.aws.secret_access_key
+      } else if (v.connectionType === ConnectionType.GCP) {
+        delete v.gcp.key_file
+      }
       return v
     })
 

diff --git a/backend/src/services/connections/index.ts b/backend/src/services/connections/index.ts
@@ -145,6 +145,7 @@ const list_connections = async () => {
         "conn.updatedAt",
         "conn.connectionType",
         "conn.aws",
+        "conn.gcp",
       ])
       .getMany()
     return resp

diff --git a/common/src/types.ts b/common/src/types.ts
@@ -341,5 +341,5 @@ export interface ConnectionInfo {
   updatedAt: Date;
   name: string;
   aws?: Omit<AWS_CONNECTION, "secret_access_key" | "access_id" | "keypair">;
-  gcp?: Omit<AWS_CONNECTION, "key_file">;
+  gcp?: Omit<GCP_CONNECTION, "key_file">;
 }
diff --git a/frontend/src/components/ConnectionInfo/connectionSelector.tsx b/frontend/src/components/ConnectionInfo/connectionSelector.tsx
@@ -17,6 +17,7 @@ import { ConnectionInfo } from "@common/types"
 import axios, { AxiosError } from "axios"
 import React, { useState } from "react"
 import AWS_INFO from "./aws"
+import GCP_INFO from "./gcp"
 
 interface ConnectionSelectorInterface {
   connection?: ConnectionInfo
@@ -55,7 +56,7 @@ const DeleteButton: React.FC<{
     <Button
       colorScheme="red"
       onClick={onBtnClick}
-      disabled={deleting}
+      disabled={deleting || conn.connectionType === ConnectionType.GCP}
       px={2}
       isLoading={deleting}
     >
@@ -83,7 +84,12 @@ const ConnectionSelector: React.FC<ConnectionSelectorInterface> = ({
         />
       )
     } else if (connection.connectionType === ConnectionType.GCP) {
-      return <Box>Nothing yet for GCP</Box>
+      return (
+        <GCP_INFO
+          connection={connection}
+          setConnection={setConnectionUpdated}
+        />
+      )
     } else {
       return <Box>Invalid choice {connection.connectionType}</Box>
     }

diff --git a/frontend/src/components/ConnectionInfo/gcp.tsx b/frontend/src/components/ConnectionInfo/gcp.tsx
@@ -0,0 +1,209 @@
+import { DownloadIcon } from "@chakra-ui/icons"
+import {
+  Box,
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Flex,
+  Grid,
+  GridItem,
+  IconButton,
+  Link,
+  Image,
+  useColorMode,
+  Button,
+  useToast,
+} from "@chakra-ui/react"
+import { ConnectionType } from "@common/enums"
+import { ConnectionInfo } from "@common/types"
+import axios from "axios"
+import { useState } from "react"
+import { getAPIURL } from "~/constants"
+import { EditableControls } from "../utils/EditableControls"
+
+interface GCP_INFOInterface {
+  connection: ConnectionInfo
+  setConnection: (updatedConnection: ConnectionInfo) => void
+}
+
+const GCP_INFO: React.FC<GCP_INFOInterface> = ({
+  connection,
+  setConnection,
+}) => {
+  const [name, setName] = useState(connection.name)
+  const colorMode = useColorMode()
+  const toast = useToast()
+  const onEditableChange = () => {
+    if (
+      JSON.stringify(connection) !=
+      JSON.stringify({ ...connection, name: name })
+    ) {
+      axios
+        .post(`${getAPIURL()}/update_connection`, {
+          id: connection.uuid,
+          name: name,
+        })
+        .then(v => {
+          toast({ title: "Updated Name for Connection" })
+          setConnection({ ...connection, name: name })
+        })
+        .catch(err => {
+          toast({
+            title: "Couldn't update name for connection",
+            description: err,
+          })
+        })
+    }
+  }
+
+  const onDownloadClick = (fileName, uuid) => {
+    axios
+      .get<{ sshkey: string }>(`${getAPIURL()}/list_connections/${uuid}/sshkey`)
+      .then(v => {
+        const element = document.createElement("a")
+        const file = new Blob([v.data.sshkey], {
+          type: "text/plain",
+        })
+        element.href = URL.createObjectURL(file)
+        element.download = `${fileName}.pem`
+        document.body.appendChild(element) // Required for this to work in FireFox
+        element.click()
+        document.body.removeChild(element)
+      })
+      .catch(err => {
+        console.log(err)
+        toast({ title: "Couldn't download ssh key file", description: err })
+      })
+  }
+  return (
+    <Grid w={"full"} gridTemplateColumns={"repeat(4,1fr)"} gap={6}>
+      <GridItem colStart={1} alignSelf={"center"}>
+        Name
+      </GridItem>
+      <GridItem colStart={2} colSpan={3} alignSelf={"center"} w={"full"}>
+        <Editable
+          value={name}
+          onChange={v => setName(v)}
+          onSubmit={onEditableChange}
+        >
+          <Flex gap={4}>
+            <EditablePreview w={"full"} />
+            <EditableInput w={"full"} />
+            <EditableControls />
+          </Flex>
+        </Editable>
+      </GridItem>
+      <GridItem colStart={1} alignSelf={"center"}>
+        Mirror Destination
+      </GridItem>
+      <GridItem colStart={2} colSpan={3} alignSelf={"center"}>
+        <Flex alignSelf={"center"} gap={2} w={"full"}>
+          <Box alignSelf={"center"} w={"full"} fontWeight="bold">
+            {connection.gcp.instance_url.split("/").at(-1)}
+          </Box>
+          <Link
+            href={`https://console.cloud.google.com/compute/instancesDetail/zones/${
+              connection.gcp.zone
+            }/instances/${connection.gcp.instance_url
+              .split("/")
+              .at(-1)}?project=${connection.gcp.project}`}
+            target="_blank"
+          >
+            <Button aria-label="See on aws" bg={"transparent"} p={0}>
+              <Image
+                alt={`AWS-image`}
+                src={`../connections/${ConnectionType.GCP}_${colorMode.colorMode}.svg`}
+              />
+            </Button>
+          </Link>
+        </Flex>
+      </GridItem>
+      <GridItem colStart={1} alignSelf={"center"}>
+        Mirror Source
+      </GridItem>
+      <GridItem colStart={2} colSpan={3} alignSelf={"center"}>
+        <Flex alignSelf={"center"} gap={2} w={"full"}>
+          <Box alignSelf={"center"} w={"full"} fontWeight="bold">
+            {connection.gcp.source_instance_name.split("/").at(-1)}
+          </Box>
+          <Link
+            href={`https://console.cloud.google.com/compute/instancesDetail/zones/${
+              connection.gcp.zone
+            }/instances/${connection.gcp.source_instance_name
+              .split("/")
+              .at(-1)}?project=${connection.gcp.project}`}
+            target="_blank"
+          >
+            <Button aria-label="See on aws" bg={"transparent"} p={0}>
+              <Image
+                alt={`AWS-image`}
+                src={`../connections/${ConnectionType.GCP}_${colorMode.colorMode}.svg`}
+              />
+            </Button>
+          </Link>
+        </Flex>
+      </GridItem>
+      {/* <GridItem colStart={1} alignSelf={"center"}>
+        Mirror Filter
+      </GridItem>
+      <GridItem colStart={2} colSpan={3} alignSelf={"center"}>
+        <Flex alignSelf={"center"} gap={2} w={"full"}>
+          <Box alignSelf={"center"} w={"full"} fontWeight="bold">
+            {connection.aws.mirror_filter_id}
+          </Box>
+          <Link
+            href={`https://${connection.aws.region}.console.aws.amazon.com/vpc/v2/home?region=${connection.aws.region}#TrafficMirrorFilter:trafficMirrorFilterId=${connection.aws.mirror_filter_id}`}
+            target="_blank"
+          >
+            <Button aria-label="See on aws" bg={"transparent"} p={0}>
+              <Image
+                alt={`AWS-image`}
+                src={`../connections/${ConnectionType.AWS}_${colorMode.colorMode}.svg`}
+              />
+            </Button>
+          </Link>
+        </Flex>
+      </GridItem>
+      <GridItem colStart={1} alignSelf={"center"}>
+        Mirror Session
+      </GridItem>
+      <GridItem colStart={2} colSpan={3} alignSelf={"center"}>
+        <Flex alignSelf={"center"} gap={2} w={"full"}>
+          <Box alignSelf={"center"} w={"full"} fontWeight="bold">
+            {connection.aws.mirror_session_id}
+          </Box>
+          <Link
+            href={`https://${connection.aws.region}.console.aws.amazon.com/vpc/v2/home?region=${connection.aws.region}#TrafficMirrorSession:trafficMirrorSessionId=${connection.aws.mirror_session_id}`}
+            target="_blank"
+          >
+            <Button aria-label="See on aws" bg={"transparent"} p={0}>
+              <Image
+                alt={`AWS-image`}
+                src={`../connections/${ConnectionType.AWS}_${colorMode.colorMode}.svg`}
+              />
+            </Button>
+          </Link>
+        </Flex>
+      </GridItem> */}
+      {/* Can't download ssh since there are none */}
+      {/* <GridItem colStart={1} alignSelf={"center"}>
+        <Box>Download</Box>
+      </GridItem>
+      <GridItem colStart={2} alignSelf={"center"}>
+        <Box>
+          <Link
+            onClick={() => onDownloadClick(connection.name, connection.uuid)}
+            download
+          >
+            <IconButton
+              aria-label="Download SSH key"
+              icon={<DownloadIcon />}
+            ></IconButton>
+          </Link>
+        </Box>
+      </GridItem> */}
+    </Grid>
+  )
+}
+
+export default GCP_INFO