From 784fe578a95b6e0e32d6b097361ca4dac4715597 Mon Sep 17 00:00:00 2001
From: Akshay Shekhawat <akshay.shekhawat@gmail.com>
Date: Thu, 4 Aug 2022 00:22:18 -0700
Subject: [PATCH] add endpoints to alert on home

---
 .../src/components/Endpoint/AlertList.tsx     | 150 +++++++++++-------
 frontend/src/components/Home/SummaryStats.tsx |   4 +-
 frontend/src/components/Home/index.tsx        |  12 +-
 frontend/src/testData.ts                      |  13 ++
 4 files changed, 120 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/Endpoint/AlertList.tsx b/frontend/src/components/Endpoint/AlertList.tsx
index 26e215ad..3e7a4a29 100644
--- a/frontend/src/components/Endpoint/AlertList.tsx
+++ b/frontend/src/components/Endpoint/AlertList.tsx
@@ -1,64 +1,108 @@
 import React from "react";
-import { useColorMode, Badge } from "@chakra-ui/react";
+import { useColorMode, Badge, HStack, Code, Text } from "@chakra-ui/react";
 import DataTable, { TableColumn } from "react-data-table-component";
 import { getCustomStyles, rowStyles } from "../utils/TableUtils";
 import { Alert } from "@common/types";
-import { RISK_TO_COLOR } from "../../constants";
+import { METHOD_TO_COLOR, RISK_TO_COLOR } from "../../constants";
 
 interface AlertListProps {
   alerts: Alert[];
+  showEndpoint?: boolean;
 }
 
-const AlertList: React.FC<AlertListProps> = React.memo(({ alerts }) => {
-  const colorMode = useColorMode();
-  const columns: TableColumn<Alert>[] = [
-    {
-      name: "Risk",
-      sortable: true,
-      selector: (row: Alert) => row.risk || "",
-      cell: (row: Alert) => (
-        <Badge
-          p="1"
-          fontSize="sm"
-          colorScheme={RISK_TO_COLOR[row.risk]}
-          pointerEvents="none"
-        >
-          {row.risk}
-        </Badge>
-      ),
-      id: "risk",
-      grow: 0,
-    },
-    {
-      name: "Type",
-      sortable: true,
-      selector: (row: Alert) => row.type || "",
-      id: "type",
-      grow: 1,
-    },
-    {
-      name: "Description",
-      sortable: true,
-      selector: (row: Alert) => row.description || "",
-      id: "title",
-      grow: 2,
-    },
-    {
-      name: "Time",
-      sortable: true,
-      selector: (row: Alert) => row.createdAt.toISOString(),
-      id: "time",
-      grow: 1,
-    },
-  ];
-  return (
-    <DataTable
-      style={rowStyles}
-      columns={columns}
-      data={alerts}
-      customStyles={getCustomStyles(colorMode.colorMode)}
-    />
-  );
-});
+const AlertList: React.FC<AlertListProps> = React.memo(
+  ({ alerts, showEndpoint }) => {
+    const colorMode = useColorMode();
+    let columns: TableColumn<Alert>[] = [
+      {
+        name: "Risk",
+        sortable: true,
+        selector: (row: Alert) => row.risk || "",
+        cell: (row: Alert) => (
+          <Badge
+            p="1"
+            fontSize="sm"
+            colorScheme={RISK_TO_COLOR[row.risk]}
+            pointerEvents="none"
+          >
+            {row.risk}
+          </Badge>
+        ),
+        id: "risk",
+        grow: 0,
+      },
+    ];
+    if (showEndpoint) {
+      columns.push({
+        name: "Endpoint",
+        sortable: true,
+        selector: (row: Alert) => `${row.endpoint.method}_${row.endpoint.path}`,
+        cell: (row: Alert) => (
+          <HStack>
+            <Badge
+              fontSize="sm"
+              px="2"
+              py="1"
+              colorScheme={METHOD_TO_COLOR[row.endpoint.method] || "gray"}
+            >
+              {row.endpoint.method.toUpperCase()}
+            </Badge>
+            <Code p="1" pointerEvents="none">
+              {row.endpoint.path}
+            </Code>
+          </HStack>
+        ),
+        id: "endpoint",
+        grow: 1,
+      });
+    }
+    columns.push(
+      {
+        name: "Type",
+        sortable: true,
+        selector: (row: Alert) => row.type || "",
+        cell: (row: Alert) => (
+          <Text fontSize="sm" fontWeight="semibold">
+            {row.type}
+          </Text>
+        ),
+        id: "type",
+        grow: 1,
+      },
+      {
+        name: "Description",
+        sortable: true,
+        selector: (row: Alert) => row.description || "",
+        cell: (row: Alert) => (
+          <Text fontSize="sm" fontWeight="semibold">
+            {row.description}
+          </Text>
+        ),
+        id: "title",
+        grow: 1,
+      },
+      {
+        name: "Time",
+        sortable: true,
+        selector: (row: Alert) => row.createdAt.toISOString(),
+        cell: (row: Alert) => (
+          <Text fontSize="sm" fontWeight="semibold">
+            {row.createdAt.toISOString()}
+          </Text>
+        ),
+        id: "time",
+        grow: 1,
+      }
+    );
+    return (
+      <DataTable
+        style={rowStyles}
+        columns={columns}
+        data={alerts}
+        customStyles={getCustomStyles(colorMode.colorMode)}
+      />
+    );
+  }
+);
 
 export default AlertList;
diff --git a/frontend/src/components/Home/SummaryStats.tsx b/frontend/src/components/Home/SummaryStats.tsx
index 90eeab04..bd2ea759 100644
--- a/frontend/src/components/Home/SummaryStats.tsx
+++ b/frontend/src/components/Home/SummaryStats.tsx
@@ -11,8 +11,8 @@ const SummaryStatValue: React.FC<{ value: number; title: string }> = React.memo(
   ({ value, title }) => (
     <VStack
       bg="cellBG"
-      w="60"
-      py="8"
+      w="56"
+      py="6"
       rounded="md"
       spacing="2"
       borderWidth="1px"
diff --git a/frontend/src/components/Home/index.tsx b/frontend/src/components/Home/index.tsx
index 4c2f9191..0cae74b1 100644
--- a/frontend/src/components/Home/index.tsx
+++ b/frontend/src/components/Home/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Heading, VStack } from "@chakra-ui/react";
+import { Box, Heading, VStack } from "@chakra-ui/react";
 import SummaryStats from "./SummaryStats";
 import AlertList from "components/Endpoint/AlertList";
 import { Alert } from "@common/types";
@@ -14,14 +14,18 @@ interface HomePageProps {
 const HomePage: React.FC<HomePageProps> = React.memo(
   ({ numAlerts, numEndpoints, numPIIDataDetected, alerts }) => {
     return (
-      <VStack w="full" alignItems="flex-start">
+      <VStack w="full" alignItems="flex-start" spacing="10">
         <SummaryStats
           numAlerts={numAlerts}
           numEndpoints={numEndpoints}
           numPIIDataDetected={numPIIDataDetected}
         />
-        <Heading fontSize="xl">Alerts</Heading>
-        <AlertList alerts={alerts} />
+        <VStack w="full" alignItems="flex-start" spacing="4">
+          <Heading fontSize="xl">Alerts</Heading>
+          <Box w="full" borderWidth="1px">
+            <AlertList alerts={alerts} showEndpoint />
+          </Box>
+        </VStack>
       </VStack>
     );
   }
diff --git a/frontend/src/testData.ts b/frontend/src/testData.ts
index 27c5aecb..bd166809 100644
--- a/frontend/src/testData.ts
+++ b/frontend/src/testData.ts
@@ -112,6 +112,19 @@ export const testConnections: Connection[] = [
 export const testAlerts: Alert[] = [
   {
     apiEndpointUuid: "5239bcfe-bf24-40e6-b952-b9811210108e",
+    endpoint: {
+      uuid: "5239bcfe-bf24-40e6-b952-b9811210108e",
+      environment: "production",
+      host: "AWS Gateway 1",
+      path: "/foo/bar/{test}",
+      method: RestMethod.POST,
+      riskScore: RiskScore.HIGH,
+      firstDetected: "2022-07-31T00:52:10.586",
+      lastActive: "2022-07-31T00:52:10.586Z",
+      piiData: [],
+      traces: [],
+      alerts: [],
+    },
     createdAt: new Date("2021-12-17T03:24:00"),
     type: AlertType.OPEN_API_SPEC_DIFF,
     risk: RiskScore.LOW,