(style) make more room on endpoint and alert pages

frontend/src/components/Alert/AlertList.tsx

@@ -11,7 +11,6 @@ import {
   AccordionButton,
   AccordionIcon,
   AccordionPanel,
-  Select,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -35,11 +34,6 @@ const RISK_SCORE_TO_LABEL: Record<RiskScore, string> = {
   [RiskScore.NONE]: "",
 }
 
-enum Order {
-  DESC = "DESC",
-  ASC = "ASC",
-}
-
 interface AlertListProps {
   alerts: Alert[]
   params: GetAlertParams
@@ -223,32 +217,6 @@ export const AlertList: React.FC<AlertListProps> = ({
 
   return (
     <VStack h="full" overflowY="hidden" w="full" alignItems="flex-start">
-      <HStack w="full" justifyContent="space-between">
-        <Box>
-          <IconButton
-            visibility={{ base: "visible", lg: "hidden" }}
-            aria-label="Filter Button"
-            icon={<FiFilter />}
-            onClick={onOpen}
-          />
-        </Box>
-        <HStack>
-          <Text>Sort By</Text>
-          <Select
-            defaultValue={Order.DESC}
-            w="fit-content"
-            onChange={e =>
-              setParams(oldParams => ({
-                ...oldParams,
-                order: e.target.value as Order,
-              }))
-            }
-          >
-            <option value={Order.DESC}>Highest Risk</option>
-            <option value={Order.ASC}>Lowest Risk</option>
-          </Select>
-        </HStack>
-      </HStack>
       <HStack h="full" overflowY="hidden" w="full" spacing={{ base: 0, lg: 4 }}>
         <VStack
           alignItems="flex-start"

frontend/src/components/EndpointList/List.tsx

@@ -1,9 +1,9 @@
 import React from "react"
-import { Badge, Box, Code, useColorMode, HStack } from "@chakra-ui/react"
+import { Badge, Box, Text, useColorMode, HStack } from "@chakra-ui/react"
 import { useRouter } from "next/router"
 import EmptyView from "components/utils/EmptyView"
 import DataTable, { SortOrder, TableColumn } from "react-data-table-component"
-import { METHOD_TO_COLOR, RISK_TO_COLOR } from "~/constants"
+import { RISK_TO_COLOR } from "~/constants"
 import {
   getCustomStyles,
   rowStyles,
@@ -36,13 +36,13 @@ const TableLoader: React.FC<TableLoaderProps> = ({
   const colorMode = useColorMode()
   const loadingColumns: TableColumn<any>[] = [
     {
-      name: "Risk Score",
+      name: "Risk",
       id: "riskScore",
       grow: 1,
     },
     {
       name: "Path",
-      id: "pathMethod",
+      id: "path",
       grow: 3,
     },
     {
@@ -100,6 +100,8 @@ const List: React.FC<EndpointTablesProps> = React.memo(
     setOrdering,
     setOrderBy,
   }) => {
+    console.log(endpoints)
+
     const router = useRouter()
     const colorMode = useColorMode()
     const handlePageChange = (page: number) => {
@@ -116,7 +118,7 @@ const List: React.FC<EndpointTablesProps> = React.memo(
 
     const columns: TableColumn<ApiEndpoint>[] = [
       {
-        name: "Risk Score",
+        name: "Risk",
         sortable: true,
         selector: (row: ApiEndpoint) => row.riskScore || "",
         cell: (row: ApiEndpoint) => (
@@ -130,26 +132,25 @@ const List: React.FC<EndpointTablesProps> = React.memo(
           </Badge>
         ),
         id: "riskScore",
-        minWidth: "110px",
+        minWidth: "75px",
         grow: 0,
       },
       {
         name: "Path",
         sortable: true,
         selector: (row: ApiEndpoint) => row.method + row.path,
         cell: (row: ApiEndpoint) => (
-          <HStack pointerEvents="none">
-            <Badge
-              p="1"
-              colorScheme={METHOD_TO_COLOR[row.method] || "gray"}
-              fontSize="sm"
-            >
-              {row.method}
-            </Badge>
-            <Code p="1">{row.path}</Code>
+          <HStack
+            fontSize="sm"
+            spacing="4"
+            pointerEvents="none"
+            alignItems="center"
+          >
+            <Text>{row.method}</Text>
+            <Text fontFamily="mono">{row.path}</Text>
           </HStack>
         ),
-        id: "pathMethod",
+        id: "path",
         grow: 3,
       },
       {

frontend/src/pages/alerts.tsx

@@ -1,4 +1,12 @@
-import { Heading, VStack, useToast, Box } from "@chakra-ui/react"
+import {
+  Heading,
+  VStack,
+  HStack,
+  Select,
+  useToast,
+  Box,
+  Text,
+} from "@chakra-ui/react"
 import superjson from "superjson"
 import React, { useState } from "react"
 import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
@@ -10,6 +18,11 @@ import { getAlerts, updateAlert } from "api/alerts"
 import { AlertType, RiskScore, Status } from "@common/enums"
 import { GetServerSideProps } from "next"
 
+enum Order {
+  DESC = "DESC",
+  ASC = "ASC",
+}
+
 const Alerts = ({ initParams, initAlerts, initTotalCount }) => {
   const parsedInitParams = superjson.parse<GetAlertParams>(initParams)
   const parsedInitAlerts = superjson.parse<Alert[]>(initAlerts)
@@ -70,11 +83,37 @@ const Alerts = ({ initParams, initAlerts, initTotalCount }) => {
       title="Alerts"
       currentTab={SideNavLinkDestination.Alerts}
     >
-      <VStack h="full" w="full" alignItems="flex-start">
-        <Heading px="8" pt="4" fontWeight="medium" size="xl">
-          Alerts
-        </Heading>
-        <Box px="8" w="full" h="full" overflowY="hidden">
+      <VStack
+        mx="auto"
+        maxW="100rem"
+        px="8"
+        pt="8"
+        h="full"
+        w="full"
+        alignItems="flex-start"
+      >
+        <HStack w="full" justifyContent="space-between" alignItems="flex-end" mb="4">
+          <Heading fontWeight="medium" size="lg">
+            Alerts
+          </Heading>
+          <HStack>
+            <Text>Sort By</Text>
+            <Select
+              defaultValue={Order.DESC}
+              w="fit-content"
+              onChange={e =>
+                setParams(oldParams => ({
+                  ...oldParams,
+                  order: e.target.value as Order,
+                }))
+              }
+            >
+              <option value={Order.DESC}>Highest Risk</option>
+              <option value={Order.ASC}>Lowest Risk</option>
+            </Select>
+          </HStack>
+        </HStack>
+        <Box w="full" h="full" overflowY="hidden">
           <AlertList
             alerts={alerts}
             handleUpdateAlert={handleUpdateAlert}

frontend/src/pages/endpoints.tsx

@@ -1,4 +1,7 @@
 import { Heading, VStack } from "@chakra-ui/react"
+import { GetServerSideProps } from "next"
+import superjson from "superjson"
+import Error from "next/error"
 import { useEffect, useState } from "react"
 import { ApiEndpoint, GetEndpointParams } from "@common/types"
 import EndpointList from "components/EndpointList"
@@ -8,24 +11,20 @@ import { ContentContainer } from "components/utils/ContentContainer"
 import { getEndpoints, getHosts } from "api/endpoints"
 import { ENDPOINT_PAGE_LIMIT } from "~/constants"
 
-const Endpoints = () => {
+const Endpoints = ({ initHosts }) => {
+  const hosts = superjson.parse<string[]>(initHosts)
+  if (!hosts) {
+    return <Error statusCode={500} />
+  }
   const [fetching, setFetching] = useState<boolean>(true)
   const [endpoints, setEndpoints] = useState<ApiEndpoint[]>([])
   const [totalCount, setTotalCount] = useState<number>()
-  const [hosts, setHosts] = useState<string[]>([])
   const [params, setParams] = useState<GetEndpointParams>({
     hosts: [],
     riskScores: [],
     offset: 0,
     limit: ENDPOINT_PAGE_LIMIT,
   })
-  useEffect(() => {
-    const fetchHosts = async () => {
-      const res = await getHosts()
-      setHosts(res)
-    }
-    fetchHosts()
-  }, [])
   useEffect(() => {
     const fetchEndpoints = async () => {
       const res = await getEndpoints(params)
@@ -40,9 +39,9 @@ const Endpoints = () => {
       title="Endpoints"
       currentTab={SideNavLinkDestination.Endpoints}
     >
-      <ContentContainer>
+      <ContentContainer maxContentW="100rem" px="8" py="8">
         <VStack w="full" alignItems="flex-start">
-          <Heading fontWeight="medium" size="xl" mb="8">
+          <Heading fontWeight="medium" size="lg" mb="4">
             Endpoints
           </Heading>
           <EndpointList
@@ -59,4 +58,13 @@ const Endpoints = () => {
   )
 }
 
+export const getServerSideProps: GetServerSideProps = async context => {
+  const hosts = await getHosts()
+  return {
+    props: {
+      initHosts: superjson.stringify(hosts),
+    },
+  }
+}
+
 export default Endpoints