add search for alert id, add routing to alerts

metlo-labs · Oct 7, 2022 · 7b22e46 · 7b22e46
1 parent 89e9462
commit 7b22e46
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 74 deletions.
diff --git a/backend/src/services/alert/index.ts b/backend/src/services/alert/index.ts
@@ -91,6 +91,12 @@ export class AlertService {
     let paginationParams: FindManyOptions<Alert> = {}
     let orderParams: FindOptionsOrder<Alert> = {}
 
+    if (alertParams?.uuid) {
+      whereConditions = {
+        ...whereConditions,
+        uuid: alertParams.uuid,
+      }
+    }
     if (alertParams?.apiEndpointUuid) {
       whereConditions = {
         ...whereConditions,

diff --git a/common/src/types.ts b/common/src/types.ts
@@ -109,6 +109,7 @@ export interface GetEndpointParams {
 }
 
 export interface GetAlertParams {
+  uuid?: string
   apiEndpointUuid?: string
   riskScores?: RiskScore[]
   status?: Status[]

diff --git a/frontend/src/api/keys/index.ts b/frontend/src/api/keys/index.ts
@@ -3,47 +3,52 @@ import { ApiKey } from "@common/types"
 import { getAPIURL } from "~/constants"
 
 export const getKeys = async (): Promise<Array<ApiKey>> => {
-    try {
-        const resp = await axios.get<Array<ApiKey>>(`${getAPIURL()}/keys/list`)
-        if (resp.status === 200 && resp.data) {
-            return resp.data
-        }
-    } catch (err) {
-        console.error(`Error fetching Api Keys: ${err}`)
-        throw err
+  try {
+    const resp = await axios.get<Array<ApiKey>>(`${getAPIURL()}/keys/list`)
+    if (resp.status === 200 && resp.data) {
+      return resp.data
     }
+  } catch (err) {
+    console.error(`Error fetching Api Keys: ${err}`)
+    throw err
+  }
 }
 export const deleteKey = async (key_name: string): Promise<void> => {
-    try {
-        const resp = await axios.delete(`${getAPIURL()}/keys/${key_name}/delete`)
-        if (resp.status === 200 && resp.data) {
-            return
-        } else {
-            throw Error(
-                `Invalid response for deleting API Key ${key_name}.
-                Received status ${resp.status} and response ${resp.data}`
-            )
-        }
-    } catch (err) {
-        console.error(`Error deleting Api Key: ${err}`)
-        throw err
+  try {
+    const resp = await axios.delete(`${getAPIURL()}/keys/${key_name}/delete`)
+    if (resp.status === 200 && resp.data) {
+      return
+    } else {
+      throw Error(
+        `Invalid response for deleting API Key ${key_name}.
+                Received status ${resp.status} and response ${resp.data}`,
+      )
     }
+  } catch (err) {
+    console.error(`Error deleting Api Key: ${err}`)
+    throw err
+  }
 }
-export const addKey = async (key_name: string): Promise<ApiKey & { apiKey: string }> => {
-    try {
-        const resp = await axios.post<ApiKey & { apiKey: string }>(`${getAPIURL()}/keys/create`, {
-            name: key_name
-        })
-        if (resp.status === 200 && resp.data) {
-            return resp.data
-        } else {
-            throw Error(
-                `Invalid response for adding API Key ${key_name}.
-                Received status ${resp.status} and response ${resp.data}`
-            )
-        }
-    } catch (err) {
-        console.error(`Error adding Api Key: ${err}`)
-        throw err
+export const addKey = async (
+  key_name: string,
+): Promise<ApiKey & { apiKey: string }> => {
+  try {
+    const resp = await axios.post<ApiKey & { apiKey: string }>(
+      `${getAPIURL()}/keys/create`,
+      {
+        name: key_name,
+      },
+    )
+    if (resp.status === 200 && resp.data) {
+      return resp.data
+    } else {
+      throw Error(
+        `Invalid response for adding API Key ${key_name}.
+                Received status ${resp.status} and response ${resp.data}`,
+      )
     }
-}
+  } catch (err) {
+    console.error(`Error adding Api Key: ${err}`)
+    throw err
+  }
+}
diff --git a/frontend/src/components/Alert/AlertList.tsx b/frontend/src/components/Alert/AlertList.tsx
@@ -18,14 +18,19 @@ import {
   ModalHeader,
   ModalOverlay,
   useDisclosure,
+  InputGroup,
+  InputLeftElement,
+  Input,
 } from "@chakra-ui/react"
+import debounce from "lodash/debounce"
 import { FiFilter } from "@react-icons/all-files/fi/FiFilter"
 import { Alert, GetAlertParams, UpdateAlertParams } from "@common/types"
 import { AlertType, RiskScore, SpecExtension, Status } from "@common/enums"
 import { ALERT_PAGE_LIMIT } from "~/constants"
 import { AlertComponent } from "components/Alert/AlertComponent"
 import EmptyView from "components/utils/EmptyView"
 import { PaginationComponent } from "components/PaginationComponent"
+import { GoSearch } from "@react-icons/all-files/go/GoSearch"
 
 const RISK_SCORE_TO_LABEL: Record<RiskScore, string> = {
   [RiskScore.HIGH]: "High",
@@ -153,6 +158,16 @@ export const AlertList: React.FC<AlertListProps> = ({
     }
   }
 
+  const setSearchQuery = (val: string) => {
+    setParams(oldParams => ({
+      ...oldParams,
+      uuid: val,
+      offset: 0,
+    }))
+  }
+
+  const debounceSearch = debounce(setSearchQuery, 500)
+
   const riskFilterPanel = (
     <Accordion defaultIndex={[0, 1, 2, 3]} w="full" allowToggle allowMultiple>
       <VStack pb="4" borderBottomWidth={1} spacing="8">
@@ -280,41 +295,55 @@ export const AlertList: React.FC<AlertListProps> = ({
         >
           {riskFilterPanel}
         </VStack>
-        {!fetching && alerts && alerts.length > 0 ? (
-          <VStack
-            h="full"
-            w="full"
-            overflowY="auto"
-            spacing="4"
-            alignSelf="flex-start"
-          >
-            {alerts.map((listAlert, i) => (
-              <Box
-                w="full"
-                key={listAlert.uuid}
-                ref={i === 0 ? scrollDivRef : null}
-              >
-                <AlertComponent
-                  alert={listAlert}
-                  handleUpdateAlert={handleUpdateAlert}
-                  updating={updating}
-                  providedSpecString={providedSpecString}
-                  providedSpecExtension={providedSpecExtension}
+        <VStack h="full" w="full" alignSelf="flex-start">
+          <InputGroup mt="1" mr="1">
+            <InputLeftElement pointerEvents="none">
+              <GoSearch />
+            </InputLeftElement>
+            <Input
+              defaultValue={params.uuid}
+              onChange={e => debounceSearch(e.target.value)}
+              type="text"
+              placeholder="Search by alert id..."
+            />
+          </InputGroup>
+
+          {!fetching && alerts && alerts.length > 0 ? (
+            <VStack
+              h="full"
+              w="full"
+              overflowY="auto"
+              spacing="4"
+              alignSelf="flex-start"
+            >
+              {alerts.map((listAlert, i) => (
+                <Box
+                  w="full"
+                  key={listAlert.uuid}
+                  ref={i === 0 ? scrollDivRef : null}
+                >
+                  <AlertComponent
+                    alert={listAlert}
+                    handleUpdateAlert={handleUpdateAlert}
+                    updating={updating}
+                    providedSpecString={providedSpecString}
+                    providedSpecExtension={providedSpecExtension}
+                  />
+                </Box>
+              ))}
+            </VStack>
+          ) : (
+            <>
+              {!fetching && (
+                <EmptyView
+                  h="full"
+                  alignSelf="flex-start"
+                  text="No results found."
                 />
-              </Box>
-            ))}
-          </VStack>
-        ) : (
-          <>
-            {!fetching && (
-              <EmptyView
-                h="full"
-                alignSelf="flex-start"
-                text="No results found."
-              />
-            )}
-          </>
-        )}
+              )}
+            </>
+          )}
+        </VStack>
         {modal}
       </HStack>
       {totalCount && (

diff --git a/frontend/src/components/Home/LatestAlerts.tsx b/frontend/src/components/Home/LatestAlerts.tsx
@@ -21,7 +21,7 @@ const AlertItem: React.FC<{ alertItem: Alert }> = React.memo(
   ({ alertItem }) => {
     return (
       <Link
-        href={`/endpoint/${alertItem.apiEndpointUuid}?tab=alerts#alert-${alertItem.uuid}`}
+        href={`/endpoint/${alertItem.apiEndpointUuid}?tab=alerts&uuid=${alertItem.uuid}`}
       >
         <HStack
           py="2"

diff --git a/frontend/src/pages/endpoint/[endpointUUID]/index.tsx b/frontend/src/pages/endpoint/[endpointUUID]/index.tsx
@@ -41,6 +41,7 @@ const Endpoint = ({
 
 export const getServerSideProps: GetServerSideProps = async context => {
   const initAlertParams = {
+    uuid: context.query.uuid as string,
     apiEndpointUuid: context.query.endpointUUID as string,
     riskScores: [],
     status: [Status.OPEN],

diff --git a/frontend/src/pages/protection.tsx b/frontend/src/pages/protection.tsx
@@ -10,7 +10,7 @@ const Protection = ({ attacksResponse, hosts }) => (
 
 export const getServerSideProps: GetServerSideProps = async context => {
   const attacksResponse = {
-    validLicense: false
+    validLicense: false,
   }
   return {
     props: {