default tab change

metlo-labs · Aug 9, 2022 · aa1047d · aa1047d
1 parent e8cca69
commit aa1047d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/frontend/src/components/AlertList/List.tsx b/frontend/src/components/AlertList/List.tsx
@@ -192,7 +192,7 @@ const List: React.FC<AlertTablesProps> = React.memo(
       row: Alert,
       e: React.MouseEvent<Element, 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
@@ -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<AlertListProps> = React.memo(
   ({ alerts, showEndpoint }) => {
+    const router = useRouter();
     const colorMode = useColorMode();
+    const onRowClicked = (
+      row: Alert,
+      e: React.MouseEvent<Element, MouseEvent>
+    ) => {
+      router.push({ pathname: `/endpoint/${row.apiEndpointUuid}`, query: { tab: "alerts"} })
+    }
+
     let columns: TableColumn<Alert>[] = [
       {
         name: "Risk",
@@ -101,6 +110,7 @@ const AlertList: React.FC<AlertListProps> = 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
@@ -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<EndpointPageProps> = 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 (
     <VStack
       w="full"
@@ -70,6 +87,7 @@ const EndpointPage: React.FC<EndpointPageProps> = React.memo(({ endpoint }) => {
         flexDir="column"
         flexGrow="1"
         overflow={{ base: "unset", lg: "hidden" }}
+        defaultIndex={getDefaultTab()}
       >
         <TabList>
           <Tab>