From 1be064d7ae82fe011bae6b8b3d9b782da174eb04 Mon Sep 17 00:00:00 2001
From: Akshay Shekhawat <akshay.shekhawat@gmail.com>
Date: Sat, 30 Jul 2022 21:44:06 -0700
Subject: [PATCH] work on endpoint page

---
 frontend/package.json                         |   2 +
 .../src/components/Endpoint/PIIDataList.tsx   |  69 ++++++++
 .../src/components/Endpoint/UsageChart.tsx    |  54 ++++++
 frontend/src/components/Endpoint/index.tsx    | 116 +++++++++++--
 frontend/src/components/EndpointList/List.tsx | 163 ++++--------------
 frontend/src/components/Sidebar/index.tsx     |   1 -
 frontend/src/components/utils/Card.tsx        |  48 +++++-
 frontend/src/components/utils/TableUtils.tsx  |  71 ++++++++
 frontend/src/constants.ts                     |   8 +
 .../src/pages/endpoint/[endpointUUID].tsx     |   3 +-
 frontend/src/testData.ts                      |  39 ++++-
 frontend/yarn.lock                            |  10 ++
 12 files changed, 422 insertions(+), 162 deletions(-)
 create mode 100644 frontend/src/components/Endpoint/PIIDataList.tsx
 create mode 100644 frontend/src/components/Endpoint/UsageChart.tsx
 create mode 100644 frontend/src/components/utils/TableUtils.tsx

diff --git a/frontend/package.json b/frontend/package.json
index c0b9d8aa..944511c1 100644
--- 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
new file mode 100644
index 00000000..8e5dd2cb
--- /dev/null
+++ 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
new file mode 100644
index 00000000..8a10bb80
--- /dev/null
+++ 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
index df4ff449..5ecb10a5 100644
--- 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>
   );
diff --git a/frontend/src/components/EndpointList/List.tsx b/frontend/src/components/EndpointList/List.tsx
index 0f683f2a..108d63ad 100644
--- a/frontend/src/components/EndpointList/List.tsx
+++ b/frontend/src/components/EndpointList/List.tsx
@@ -1,24 +1,11 @@
 import React from "react";
-import {
-  Badge,
-  Box,
-  Code,
-  Skeleton,
-  useColorMode,
-  ColorMode,
-  HStack,
-} from "@chakra-ui/react";
+import { Badge, Box, Code, useColorMode, HStack } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import EmptyView from "../utils/EmptyView";
-import _ from "lodash";
-import DataTable, {
-  Media,
-  SortOrder,
-  TableColumn,
-  TableStyles,
-} from "react-data-table-component";
-import { Endpoint, RiskScore } from "../../types";
-import { METHOD_TO_COLOR } from "../../constants";
+import DataTable, { SortOrder, TableColumn } from "react-data-table-component";
+import { Endpoint } from "../../types";
+import { METHOD_TO_COLOR, RISK_TO_COLOR } from "../../constants";
+import { getCustomStyles, rowStyles, SkeletonCell } from "../utils/TableUtils";
 
 const PAGE_SIZE = 10;
 
@@ -37,70 +24,6 @@ interface TableLoaderProps {
   totalCount: number;
 }
 
-const conditionalRowStyles = [
-  {
-    when: (row: TableColumn<Endpoint>) => row.name !== null,
-    style: {
-      backgroundColor: "rgba(63, 195, 128, 0.9)",
-      color: "white",
-      "&:hover": {
-        cursor: "pointer",
-      },
-    },
-  },
-];
-
-const getCustomStyles = (colorMode: ColorMode): TableStyles => {
-  const headerBg =
-    colorMode == "light" ? "rgb(252, 252, 252)" : "rgb(17, 19, 23)";
-  const headerTextColor =
-    colorMode == "light" ? "rgb(163, 165, 170)" : "rgb(98, 100, 116)";
-  const textColor = colorMode == "light" ? "black" : "white";
-  const rowColor = colorMode == "light" ? "white" : "rgb(21, 23, 27)";
-  const hoverRowColor =
-    colorMode == "light" ? "rgb(252, 252, 252)" : "rgb(24, 26, 30)";
-  return {
-    rows: {
-      style: {
-        background: rowColor,
-        color: textColor,
-        minHeight: "64px",
-        fontWeight: "500",
-        "&:hover": {
-          cursor: "pointer",
-          background: hoverRowColor,
-        },
-      },
-    },
-    headRow: {
-      style: {
-        background: headerBg,
-        color: headerTextColor,
-      },
-    },
-    pagination: {
-      style: {
-        background: headerBg,
-        color: textColor,
-      },
-      pageButtonsStyle: {
-        color: textColor,
-        fill: textColor,
-        "&:disabled": {
-          fill: textColor,
-          color: textColor,
-        },
-      },
-    },
-  } as TableStyles;
-};
-
-const riskToColor = {
-  [RiskScore.LOW]: "gray",
-  [RiskScore.MEDIUM]: "orange",
-  [RiskScore.HIGH]: "red",
-};
-
 const TableLoader: React.FC<TableLoaderProps> = ({
   currentPage,
   totalCount,
@@ -108,63 +31,45 @@ const TableLoader: React.FC<TableLoaderProps> = ({
   const colorMode = useColorMode();
   const loadingColumns: TableColumn<any>[] = [
     {
-      name: "Table",
-      selector: () => "",
-      cell: () => (
-        <Box w="100px" h="10px">
-          <Skeleton startColor="gray.50" endColor="gray.200" height="20px" />
-        </Box>
-      ),
-      id: "table_id",
+      name: "Risk Score",
+      id: "riskScore",
+      grow: 1,
+    },
+    {
+      name: "Path",
+      id: "pathMethod",
+      grow: 3,
     },
     {
-      name: "Dataset",
-      selector: () => "",
-      cell: () => (
-        <Box w="100px" h="10px">
-          <Skeleton startColor="gray.50" endColor="gray.200" height="20px" />
-        </Box>
-      ),
-      id: "table_dataset",
-      hide: Media.LG,
+      name: "Environment",
+      id: "environment",
+      grow: 1,
     },
     {
-      name: "Project",
-      selector: () => "",
-      cell: () => (
-        <Box w="100px" h="10px">
-          <Skeleton startColor="gray.50" endColor="gray.200" height="20px" />
-        </Box>
-      ),
-      id: "table_project",
-      hide: Media.MD,
+      name: "Host",
+      id: "host",
+      grow: 1,
     },
     {
-      name: "Owner",
-      selector: () => "",
-      cell: () => (
-        <Box w="100px" h="10px">
-          <Skeleton startColor="gray.50" endColor="gray.200" height="20px" />
-        </Box>
-      ),
-      id: "owner",
+      name: "First Detected",
+      id: "firstDetected",
+      grow: 2,
     },
     {
-      name: "Datasource",
-      selector: () => "",
-      cell: () => (
-        <Box w="full" h="20px">
-          <Skeleton startColor="gray.50" endColor="gray.200" height="20px" />
-        </Box>
-      ),
-      id: "datasource_name",
+      name: "Last Active",
+      id: "lastActive",
+      grow: 2,
     },
-  ];
+  ].map((e) => ({
+    ...e,
+    sortable: true,
+    cell: (row: Endpoint) => <SkeletonCell />,
+  }));
 
   return (
     <Box w="full" h="full">
       <DataTable
-        style={conditionalRowStyles}
+        style={rowStyles}
         paginationComponentOptions={{ noRowsPerPage: true }}
         paginationTotalRows={totalCount}
         paginationServer
@@ -213,7 +118,7 @@ const List: React.FC<EndpointTablesProps> = React.memo(
           <Badge
             p="1"
             fontSize="sm"
-            colorScheme={riskToColor[row.riskScore]}
+            colorScheme={RISK_TO_COLOR[row.riskScore]}
             pointerEvents="none"
           >
             {row.riskScore}
@@ -238,7 +143,7 @@ const List: React.FC<EndpointTablesProps> = React.memo(
             <Code p="1">{row.path}</Code>
           </HStack>
         ),
-        id: "method",
+        id: "pathMethod",
         grow: 3,
       },
       {
@@ -280,7 +185,7 @@ const List: React.FC<EndpointTablesProps> = React.memo(
 
     const getTable = () => (
       <DataTable
-        style={conditionalRowStyles}
+        style={rowStyles}
         paginationComponentOptions={{ noRowsPerPage: true }}
         paginationTotalRows={totalCount}
         paginationServer
diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/index.tsx
index 0aeb5458..921a5545 100644
--- a/frontend/src/components/Sidebar/index.tsx
+++ b/frontend/src/components/Sidebar/index.tsx
@@ -8,7 +8,6 @@ import {
 } from "@chakra-ui/react";
 import React from "react";
 import { Logo, SmLogo } from "../Logo";
-import { DarkModeSwitch } from "../utils/DarkModeSwitch";
 import { SideNavLinkDestination } from "./NavLinkUtils";
 import SideNavLink from "./SideNavLink";
 
diff --git a/frontend/src/components/utils/Card.tsx b/frontend/src/components/utils/Card.tsx
index 47cea348..9730a185 100644
--- a/frontend/src/components/utils/Card.tsx
+++ b/frontend/src/components/utils/Card.tsx
@@ -1,16 +1,54 @@
 import React from "react";
 import { IconType } from "@react-icons/all-files/lib";
-import { Grid, Heading, HStack, VStack } from "@chakra-ui/react";
+import {
+  Grid,
+  Heading,
+  HStack,
+  Text,
+  TextProps,
+  useColorModeValue,
+  VStack,
+} from "@chakra-ui/react";
 
-export const SectionHeader: React.FC<{ text: string; sym: IconType }> =
-  React.memo(({ text, sym }) => (
-    <HStack>
+type DataHeadingProps = TextProps;
+
+export const DataHeading: React.FC<DataHeadingProps> = React.memo(
+  ({ children, ...props }) => {
+    const color = useColorModeValue("rgb(102, 105, 117)", "rgb(116, 120, 138)");
+    return (
+      <Text fontSize="md" fontWeight="medium" color={color} pb="2" {...props}>
+        {children}
+      </Text>
+    );
+  }
+);
+
+type DataAttributeProps = TextProps;
+
+export const DataAttribute: React.FC<DataAttributeProps> = React.memo(
+  ({ children, ...props }) => {
+    const color = useColorModeValue("black", "white");
+    return (
+      <Text fontWeight="bold" color={color} overflowWrap="anywhere" {...props}>
+        {children}
+      </Text>
+    );
+  }
+);
+
+export const SectionHeader: React.FC<{
+  text: string;
+  sym: IconType;
+}> = React.memo(({ text, sym }) => {
+  return (
+    <HStack justifyContent="center">
       {sym({})}
       <Heading size="sm" fontWeight="semibold">
         {text}
       </Heading>
     </HStack>
-  ));
+  );
+});
 
 export const Card: React.FC<{ children: React.ReactNode }> = React.memo(
   ({ children }) => {
diff --git a/frontend/src/components/utils/TableUtils.tsx b/frontend/src/components/utils/TableUtils.tsx
new file mode 100644
index 00000000..ce21ba4b
--- /dev/null
+++ b/frontend/src/components/utils/TableUtils.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { Box, Skeleton, useColorModeValue } from "@chakra-ui/react";
+import { ColorMode } from "@chakra-ui/react";
+import { TableStyles } from "react-data-table-component";
+
+export const getCustomStyles = (colorMode: ColorMode): TableStyles => {
+  const headerBg =
+    colorMode == "light" ? "rgb(252, 252, 252)" : "rgb(17, 19, 23)";
+  const headerTextColor =
+    colorMode == "light" ? "rgb(163, 165, 170)" : "rgb(98, 100, 116)";
+  const textColor = colorMode == "light" ? "black" : "white";
+  const rowColor = colorMode == "light" ? "white" : "rgb(21, 23, 27)";
+  const hoverRowColor =
+    colorMode == "light" ? "rgb(252, 252, 252)" : "rgb(24, 26, 30)";
+  return {
+    rows: {
+      style: {
+        background: rowColor,
+        color: textColor,
+        minHeight: "64px",
+        fontWeight: "500",
+        "&:hover": {
+          cursor: "pointer",
+          background: hoverRowColor,
+        },
+      },
+    },
+    headRow: {
+      style: {
+        background: headerBg,
+        color: headerTextColor,
+      },
+    },
+    pagination: {
+      style: {
+        background: headerBg,
+        color: textColor,
+      },
+      pageButtonsStyle: {
+        color: textColor,
+        fill: textColor,
+        "&:disabled": {
+          fill: textColor,
+          color: textColor,
+        },
+      },
+    },
+  } as TableStyles;
+};
+
+export const SkeletonCell = React.memo(() => {
+  const startColor = useColorModeValue("gray.50", "gray.700");
+  const endColor = useColorModeValue("gray.200", "gray.800");
+  return (
+    <Box w="100%" h="10px">
+      <Skeleton startColor={startColor} endColor={endColor} height="20px" />
+    </Box>
+  );
+});
+
+export const rowStyles = [
+  {
+    style: {
+      backgroundColor: "rgba(63, 195, 128, 0.9)",
+      color: "white",
+      "&:hover": {
+        cursor: "pointer",
+      },
+    },
+  },
+];
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index 4816a414..e11a077e 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -1,4 +1,12 @@
+import { RiskScore } from "./types";
+
 export const METHOD_TO_COLOR = {
   GET: "green",
   POST: "orange",
 };
+
+export const RISK_TO_COLOR = {
+  [RiskScore.LOW]: "gray",
+  [RiskScore.MEDIUM]: "orange",
+  [RiskScore.HIGH]: "red",
+};
diff --git a/frontend/src/pages/endpoint/[endpointUUID].tsx b/frontend/src/pages/endpoint/[endpointUUID].tsx
index 8b0dfa50..8129a830 100644
--- a/frontend/src/pages/endpoint/[endpointUUID].tsx
+++ b/frontend/src/pages/endpoint/[endpointUUID].tsx
@@ -8,14 +8,13 @@ import EndpointPage from "../../components/Endpoint";
 const Endpoint = ({ endpoint }) => {
   return (
     <SidebarLayoutShell currentTab={SideNavLinkDestination.Endpoints}>
-      <ContentContainer>
+      <ContentContainer maxContentW="5xl">
         <EndpointPage endpoint={endpoint} />
       </ContentContainer>
     </SidebarLayoutShell>
   );
 };
 
-// This gets called on every request
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const endpoint = testEndpoints.find(
     (e) => e.uuid == context.query.endpointUUID
diff --git a/frontend/src/testData.ts b/frontend/src/testData.ts
index e0c75400..1f0c6756 100644
--- a/frontend/src/testData.ts
+++ b/frontend/src/testData.ts
@@ -1,6 +1,6 @@
-import { RiskScore } from "./types";
+import { Endpoint, RiskScore } from "./types";
 
-export const testEndpoints = [
+export const testEndpoints: Endpoint[] = [
   {
     uuid: "5239bcfe-bf24-40e6-b952-b9811210108e",
     environment: "production",
@@ -8,17 +8,38 @@ export const testEndpoints = [
     path: "/foo/bar/{test}",
     method: "POST",
     riskScore: RiskScore.HIGH,
-    firstDetected: new Date().toISOString(),
-    lastActive: new Date().toISOString(),
+    firstDetected: "2022-07-31T00:52:10.586",
+    lastActive: "2022-07-31T00:52:10.586Z",
+    piiData: [
+      {
+        dataType: "asdf",
+        dataPath: "result.asdf",
+        risk: RiskScore.HIGH,
+        dateIdentified: "2022-07-31T00:52:10.586Z",
+      },
+      {
+        dataType: "foo",
+        dataPath: "result.asdf.asdf",
+        risk: RiskScore.MEDIUM,
+        dateIdentified: "2022-07-31T00:52:10.586Z",
+      },
+      {
+        dataType: "bar",
+        dataPath: "result.asdf.bar",
+        risk: RiskScore.LOW,
+        dateIdentified: "2022-07-31T00:52:10.586Z",
+      },
+    ],
   },
   {
-    uuid: "5239bcfe-bf24-40e6-b952-b9811210108e",
+    uuid: "3425c51f-179b-45b6-9c1c-938f7f678f17",
     environment: "production",
     host: "AWS Gateway 1",
-    path: "/foo/bar/{test}",
-    method: "POST",
+    path: "/foo/blam/{test}",
+    method: "GET",
     riskScore: RiskScore.MEDIUM,
-    firstDetected: new Date().toISOString(),
-    lastActive: new Date().toISOString(),
+    firstDetected: "2022-07-31T00:52:10.586Z",
+    lastActive: "2022-07-31T00:52:10.586Z",
+    piiData: [],
   },
 ];
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 392ec176..d21a3493 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1115,6 +1115,11 @@ chalk@^2.0.0:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chart.js@^3.8.2:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.8.2.tgz#e3ebb88f7072780eec4183a788a990f4a58ba7a1"
+  integrity sha512-7rqSlHWMUKFyBDOJvmFGW2lxULtcwaPLegDjX/Nu5j6QybY+GCiQkEY+6cqHw62S5tcwXMD8Y+H5OBGoR7d+ZQ==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -1484,6 +1489,11 @@ prop-types@^15.6.0, prop-types@^15.6.2:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+react-chartjs-2@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz#9941e7397fb963f28bb557addb401e9ff96c6681"
+  integrity sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==
+
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"