work on endpoint page

metlo-labs · Jul 31, 2022 · 1be064d · 1be064d
1 parent 05c79c8
commit 1be064d
Show file tree

Hide file tree

Showing 12 changed files with 422 additions and 162 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,9 +13,11 @@
     "@emotion/styled": "^11.9.0",
     "@react-icons/all-files": "^4.1.0",
     "chakra-react-select": "^4.1.4",
+    "chart.js": "^3.8.2",
     "framer-motion": "^6.3.0",
     "next": "latest",
     "react": "^18.2.0",
+    "react-chartjs-2": "^4.3.1",
     "react-data-table-component": "^7.5.2",
     "react-dom": "^18.2.0",
     "styled-components": "^5.3.5"

diff --git a/frontend/src/components/Endpoint/PIIDataList.tsx b/frontend/src/components/Endpoint/PIIDataList.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { useColorMode, Code, Badge } from "@chakra-ui/react";
+import { PIIField } from "../../types";
+import DataTable, { TableColumn } from "react-data-table-component";
+import { getCustomStyles, rowStyles } from "../utils/TableUtils";
+import { RISK_TO_COLOR } from "../../constants";
+
+interface PIIDataListProps {
+  PIIFields: PIIField[];
+}
+
+const PIIDataList: React.FC<PIIDataListProps> = React.memo(({ PIIFields }) => {
+  const colorMode = useColorMode();
+  const columns: TableColumn<PIIField>[] = [
+    {
+      name: "Risk Score",
+      sortable: true,
+      selector: (row: PIIField) => row.risk || "",
+      cell: (row: PIIField) => (
+        <Badge
+          p="1"
+          fontSize="sm"
+          colorScheme={RISK_TO_COLOR[row.risk]}
+          pointerEvents="none"
+        >
+          {row.risk}
+        </Badge>
+      ),
+      id: "riskScore",
+      grow: 1,
+    },
+    {
+      name: "Data Type",
+      sortable: true,
+      selector: (row: PIIField) => row.dataType || "",
+      id: "dataType",
+      grow: 1,
+    },
+    {
+      name: "Data Path",
+      sortable: true,
+      selector: (row: PIIField) => row.dataPath,
+      cell: (row: PIIField) => (
+        <Code p="1" pointerEvents="none">
+          {row.dataPath}
+        </Code>
+      ),
+      id: "dataPath",
+      grow: 2,
+    },
+    {
+      name: "Date Identified",
+      sortable: true,
+      selector: (row: PIIField) => row.dateIdentified || "",
+      id: "dateIdentified",
+      grow: 2,
+    },
+  ];
+  return (
+    <DataTable
+      style={rowStyles}
+      columns={columns}
+      data={PIIFields}
+      customStyles={getCustomStyles(colorMode.colorMode)}
+    />
+  );
+});
+
+export default PIIDataList;
diff --git a/frontend/src/components/Endpoint/UsageChart.tsx b/frontend/src/components/Endpoint/UsageChart.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+export const options = {
+  responsive: true,
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+};
+
+const labels = ["January", "February", "March", "April", "May", "June", "July"];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      data: labels.map(() => Math.floor(Math.random() * 1000)),
+      borderColor: "rgb(255, 99, 132)",
+      backgroundColor: "rgba(255, 99, 132, 0.5)",
+    },
+  ],
+};
+
+interface EndpointUsageChartProps {}
+
+const EndpointUsageChart: React.FC<EndpointUsageChartProps> = React.memo(
+  ({}) => {
+    return <Line height="60" options={options} data={data} />;
+  }
+);
+
+export default EndpointUsageChart;
diff --git a/frontend/src/components/Endpoint/index.tsx b/frontend/src/components/Endpoint/index.tsx
@@ -1,20 +1,54 @@
 import React from "react";
+import NextLink from "next/link";
 import { BiInfoCircle } from "@react-icons/all-files/bi/BiInfoCircle";
 import { BsFillLockFill } from "@react-icons/all-files/bs/BsFillLockFill";
+import { GrStackOverflow } from "@react-icons/all-files/gr/GrStackOverflow";
+import { TiFlowSwitch } from "@react-icons/all-files/ti/TiFlowSwitch";
 import { FaBell } from "@react-icons/all-files/fa/FaBell";
-import { Badge, Code, GridItem, HStack, VStack } from "@chakra-ui/react";
+import {
+  Box,
+  Badge,
+  Code,
+  GridItem,
+  HStack,
+  VStack,
+  Text,
+  useColorModeValue,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+} from "@chakra-ui/react";
 import { Endpoint } from "../../types";
-import { CardWithHeader } from "../utils/Card";
-import { METHOD_TO_COLOR } from "../../constants";
+import {
+  CardWithHeader,
+  DataAttribute,
+  DataHeading,
+  SectionHeader,
+} from "../utils/Card";
+import { METHOD_TO_COLOR, RISK_TO_COLOR } from "../../constants";
+import PIIDataList from "./PIIDataList";
+import EndpointUsageChart from "./UsageChart";
 
 interface EndpointPageProps {
   endpoint: Endpoint;
 }
 
 const EndpointPage: React.FC<EndpointPageProps> = React.memo(({ endpoint }) => {
+  const headerColor = useColorModeValue(
+    "rgb(179, 181, 185)",
+    "rgb(91, 94, 109)"
+  );
   return (
-    <VStack w="full" alignItems="flex-start" spacing="8">
-      <HStack spacing="4">
+    <VStack w="full" alignItems="flex-start" spacing="2">
+      <NextLink href="/endpoints">
+        <HStack color={headerColor} spacing="1" cursor="pointer">
+          <TiFlowSwitch />
+          <Text fontWeight="semibold">Endpoints</Text>
+        </HStack>
+      </NextLink>
+      <HStack spacing="4" pb="8">
         <Badge
           fontSize="xl"
           px="2"
@@ -29,18 +63,68 @@ const EndpointPage: React.FC<EndpointPageProps> = React.memo(({ endpoint }) => {
       </HStack>
       <VStack w="full" alignItems="flex-start" spacing="8">
         <CardWithHeader title="Metadata" sym={BiInfoCircle}>
-          <GridItem w="100%" h="10" bg="blue.500" />
-          <GridItem w="100%" h="10" bg="blue.500" />
-          <GridItem w="100%" h="10" bg="blue.500" colSpan={2} />
-        </CardWithHeader>
-        <CardWithHeader title="PII Fields" sym={BsFillLockFill}>
-          <GridItem w="100%" h="10" bg="blue.500" />
-          <GridItem w="100%" h="10" bg="blue.500" />
-        </CardWithHeader>
-        <CardWithHeader title="Alerts" sym={FaBell}>
-          <GridItem w="100%" h="10" bg="blue.500" />
-          <GridItem w="100%" h="10" bg="blue.500" />
+          <GridItem>
+            <DataHeading>Host</DataHeading>
+            <DataAttribute>{endpoint.host}</DataAttribute>
+          </GridItem>
+          <GridItem>
+            <DataHeading>Environment</DataHeading>
+            <DataAttribute>{endpoint.environment}</DataAttribute>
+          </GridItem>
+          <GridItem>
+            <DataHeading>Risk Score</DataHeading>
+            <Badge
+              p="1"
+              fontSize="sm"
+              colorScheme={RISK_TO_COLOR[endpoint.riskScore]}
+              pointerEvents="none"
+            >
+              {endpoint.riskScore}
+            </Badge>
+          </GridItem>
+          <GridItem>
+            <DataHeading>First Detected</DataHeading>
+            <DataAttribute>{endpoint.firstDetected}</DataAttribute>
+          </GridItem>
+          <GridItem>
+            <DataHeading>Last Active</DataHeading>
+            <DataAttribute>{endpoint.lastActive}</DataAttribute>
+          </GridItem>
+          <GridItem w="100%" colSpan={2}>
+            <DataHeading>Usage</DataHeading>
+            <EndpointUsageChart />
+          </GridItem>
         </CardWithHeader>
+        <Tabs w="full">
+          <TabList>
+            <Tab>
+              <SectionHeader text="PII Fields" sym={BsFillLockFill} />
+            </Tab>
+            <Tab>
+              <SectionHeader text="Logs" sym={GrStackOverflow} />
+            </Tab>
+            <Tab>
+              <SectionHeader text="Alerts" sym={FaBell} />
+            </Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel p="0">
+              <Box w="full" borderWidth="2px" borderTopWidth="0px">
+                <PIIDataList PIIFields={endpoint.piiData} />
+              </Box>
+            </TabPanel>
+            <TabPanel p="0">
+              <Box w="full" borderWidth="2px" borderTopWidth="0px">
+                <PIIDataList PIIFields={endpoint.piiData} />
+              </Box>
+            </TabPanel>
+            <TabPanel p="0">
+              <Box w="full" borderWidth="2px" borderTopWidth="0px">
+                <PIIDataList PIIFields={endpoint.piiData} />
+              </Box>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
       </VStack>
     </VStack>
   );