diff --git a/frontend/src/components/AlertList/List.tsx b/frontend/src/components/AlertList/List.tsx index 918a4285..33d5c769 100644 --- a/frontend/src/components/AlertList/List.tsx +++ b/frontend/src/components/AlertList/List.tsx @@ -192,7 +192,7 @@ const List: React.FC = React.memo( row: Alert, e: React.MouseEvent ) => { - router.push(`/endpoint/${row.apiEndpointUuid}`); + router.push({ pathname: `/endpoint/${row.apiEndpointUuid}`, query: { tab: "alerts" }}); }; const getTable = () => ( diff --git a/frontend/src/components/Endpoint/AlertList.tsx b/frontend/src/components/Endpoint/AlertList.tsx index f2ddbf57..581b4770 100644 --- a/frontend/src/components/Endpoint/AlertList.tsx +++ b/frontend/src/components/Endpoint/AlertList.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { useRouter } from "next/router"; import { useColorMode, Badge, HStack, Code, Text } from "@chakra-ui/react"; import DataTable, { TableColumn } from "react-data-table-component"; import { getCustomStyles, rowStyles } from "../utils/TableUtils"; @@ -13,7 +14,15 @@ interface AlertListProps { const AlertList: React.FC = React.memo( ({ alerts, showEndpoint }) => { + const router = useRouter(); const colorMode = useColorMode(); + const onRowClicked = ( + row: Alert, + e: React.MouseEvent + ) => { + router.push({ pathname: `/endpoint/${row.apiEndpointUuid}`, query: { tab: "alerts"} }) + } + let columns: TableColumn[] = [ { name: "Risk", @@ -101,6 +110,7 @@ const AlertList: React.FC = React.memo( columns={columns} data={alerts} customStyles={getCustomStyles(colorMode.colorMode)} + onRowClicked={onRowClicked} /> ); } diff --git a/frontend/src/components/Endpoint/index.tsx b/frontend/src/components/Endpoint/index.tsx index f55b08f9..1657160e 100644 --- a/frontend/src/components/Endpoint/index.tsx +++ b/frontend/src/components/Endpoint/index.tsx @@ -18,6 +18,7 @@ import { TabPanels, TabPanel, } from "@chakra-ui/react"; +import { useRouter } from "next/router"; import { SectionHeader } from "../utils/Card"; import { ApiEndpointDetailed } from "@common/types"; import { METHOD_TO_COLOR } from "../../constants"; @@ -31,10 +32,26 @@ interface EndpointPageProps { } const EndpointPage: React.FC = React.memo(({ endpoint }) => { + const router = useRouter(); const headerColor = useColorModeValue( "rgb(179, 181, 185)", "rgb(91, 94, 109)" ); + const { tab } = router.query; + const getDefaultTab = () => { + switch (tab) { + case "overview": + return 0; + case "pii": + return 1; + case "traces": + return 2; + case "alerts": + return 3; + default: + return 0; + } + } return ( = React.memo(({ endpoint }) => { flexDir="column" flexGrow="1" overflow={{ base: "unset", lg: "hidden" }} + defaultIndex={getDefaultTab()} >