List tests page

backend/src/api/tests/index.ts

@@ -41,8 +41,9 @@ export const listTests = async (req: Request, res: Response): Promise<void> => {
   const { uuid } = req.params;
 
   let resp = await AppDataSource.getRepository(ApiEndpointTest)
-    .createQueryBuilder()
+    .createQueryBuilder("test")
     .select()
+    .leftJoinAndSelect("test.apiEndpoint", "apiEndpoint")
     .getMany();
 
   await ApiResponseHandler.success(res, resp);

backend/src/index.ts

@@ -105,8 +105,8 @@ app.post("/api/v1/update_connection", update_connection);
 app.post("/api/v1/test/run", runTestHandler);
 
 app.post("/api/v1/test/save", saveTest);
-app.get("/api/v1/tests/list", listTests);
-app.get("/api/v1/tests/list/:uuid", getTest);
+app.get("/api/v1/test/list", listTests);
+app.get("/api/v1/test/list/:uuid", getTest);
 
 const main = async () => {
   try {

common/src/testing/types.ts

@@ -1,3 +1,4 @@
+import { ApiEndpoint } from "../types";
 import { RestMethod } from "../enums";
 import { APIKeyAuthAddTo, AuthType, RequestBodyType } from "./enums";
 
@@ -66,3 +67,11 @@ export interface Test {
   tags: string[];
   requests: Request[];
 }
+
+export interface TestDetailed {
+  uuid: string;
+  name: string;
+  tags: string[];
+  requests: Request[];
+  apiEndpoint: ApiEndpoint;
+}

frontend/src/api/tests/index.ts

@@ -1,13 +1,17 @@
 import axios from "axios";
 import { getAPIURL } from "~/constants";
-import { Test } from "@common/testing/types";
+import { TestDetailed, Test } from "@common/testing/types";
 
 export const runTest = async (test: Test) => {
   const resp = await axios.post<any>(`${getAPIURL()}/test/run`, {
     test,
   });
 };
 
+export const listTests = async () => {
+  const resp = await axios.get<Array<TestDetailed>>(`${getAPIURL()}/test/list`);
+  return resp;
+};
 
 export const saveTest = async (test: Test, endpoint_uuid: string) => {
   const resp = await axios.post<any>(`${getAPIURL()}/test/save`, {

frontend/src/components/TestList/List.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { Badge, Text, useColorMode, VStack } from "@chakra-ui/react";
+import DataTable, { TableColumn } from "react-data-table-component";
+import { getCustomStyles, rowStyles } from "components/utils/TableUtils";
+import { TestDetailed } from "@common/testing/types";
+import { RISK_TO_COLOR } from "~/constants";
+
+interface TestListProps {
+  tests: TestDetailed[];
+}
+
+const TestList: React.FC<TestListProps> = React.memo(({ tests }) => {
+  const router = useRouter();
+  const colorMode = useColorMode();
+  const onRowClicked = (
+    row: TestDetailed,
+    e: React.MouseEvent<Element, MouseEvent>
+  ) => {
+    router.push(`/test/${row.uuid}`);
+  };
+  const columns: TableColumn<TestDetailed>[] = [
+    {
+      name: "Name",
+      sortable: true,
+      selector: (row: TestDetailed) => row.name || "",
+      id: "name",
+    },
+    {
+      name: "Tags",
+      sortable: true,
+      selector: (row: TestDetailed) => row.tags?.join(", ") || "",
+      cell: (row: TestDetailed) => (
+        <VStack alignItems="flex-start" py="2">
+          {row.tags?.map((tag, idx) => (
+            <Badge key={idx}>{tag}</Badge>
+          ))}
+        </VStack>
+      ),
+      id: "hosts",
+    },
+    {
+      name: "Requests",
+      sortable: true,
+      selector: (row: TestDetailed) => row.tags?.join(", ") || "",
+      cell: (row: TestDetailed) => (
+        <VStack
+          alignItems="flex-start"
+          py="2"
+          overflow={"hidden"}
+          textOverflow={"ellipsis"}
+        >
+          {row.requests?.map((req, idx) => (
+            <Badge key={idx}>{req.url}</Badge>
+          ))}
+        </VStack>
+      ),
+      id: "requests",
+    },
+    {
+      name: "Endpoint Risk",
+      sortable: true,
+      selector: (row: TestDetailed) => row.apiEndpoint.riskScore || "",
+      cell: (row: TestDetailed) => (
+        <Badge
+          p="1"
+          fontSize="sm"
+          colorScheme={RISK_TO_COLOR[row.apiEndpoint.riskScore]}
+          pointerEvents="none"
+        >
+          {row.apiEndpoint.riskScore}
+        </Badge>
+      ),
+      id: "endpointRisk",
+    },
+  ];
+  return (
+    <DataTable
+      style={rowStyles}
+      columns={columns}
+      data={tests}
+      onRowClicked={onRowClicked}
+      customStyles={getCustomStyles(colorMode.colorMode)}
+    />
+  );
+});
+
+export default TestList;

frontend/src/components/TestList/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Box, VStack } from "@chakra-ui/react";
+import List from "./List";
+import { Test, TestDetailed } from "@common/testing/types";
+
+const ListTests: React.FC<{ tests: Array<TestDetailed> }> = React.memo(
+  ({ tests }) => (
+    <VStack
+      w="full"
+      alignItems="flex-start"
+      borderWidth="1px"
+      rounded="md"
+      spacing="0"
+      overflow="hidden"
+    >
+      <Box w="full">
+        <List tests={tests} />
+      </Box>
+    </VStack>
+  )
+);
+
+export default ListTests;

frontend/src/pages/tests.tsx

@@ -1,21 +1,31 @@
 import { Heading, VStack } from "@chakra-ui/react";
 import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils";
+import { GetServerSideProps } from "next";
+import { listTests } from "~/api/tests";
 import { SidebarLayoutShell } from "~/components/SidebarLayoutShell";
+import ListTests from "~/components/TestList";
 import { ContentContainer } from "~/components/utils/ContentContainer";
+import superjson from "superjson";
 
-const Tests = () => (
-  <SidebarLayoutShell
-    title="Tests"
-    currentTab={SideNavLinkDestination.Tests}
-  >
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const tests = await listTests();
+  return {
+    props: {
+      tests: superjson.stringify(tests.data),
+    },
+  };
+};
+
+const Tests = ({ tests }) => (
+  <SidebarLayoutShell title="Tests" currentTab={SideNavLinkDestination.Tests}>
     <ContentContainer>
       <VStack w="full" alignItems="flex-start">
         <Heading fontWeight="medium" size="xl" mb="8">
           Tests
         </Heading>
+        <ListTests tests={superjson.parse(tests)} />
       </VStack>
     </ContentContainer>
   </SidebarLayoutShell>
 );
-
 export default Tests;