fix pii fields and traces tabs

metlo-labs · Aug 8, 2022 · b2d5524 · b2d5524
1 parent ff00149
commit b2d5524
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/common/src/types.ts b/common/src/types.ts
@@ -100,8 +100,8 @@ export interface PIIField {
   dataClass: string;
   dataPath: string;
   risk: RiskScore;
-  createdAt: string;
-  updatedAt: string;
+  createdAt: Date;
+  updatedAt: Date;
   matches: string[];
   isRisk: boolean;
 }

diff --git a/frontend/src/components/Endpoint/PIIDataList.tsx b/frontend/src/components/Endpoint/PIIDataList.tsx
@@ -4,6 +4,7 @@ import { PIIField } from "@common/types";
 import DataTable, { TableColumn } from "react-data-table-component";
 import { getCustomStyles, rowStyles } from "../utils/TableUtils";
 import { RISK_TO_COLOR, DATA_CLASS_TO_RISK_SCORE } from "../../constants";
+import { getDateTimeString } from "../../utils";
 
 interface PIIDataListProps {
   PIIFields: PIIField[];
@@ -51,7 +52,7 @@ const PIIDataList: React.FC<PIIDataListProps> = React.memo(({ PIIFields }) => {
     {
       name: "Date Identified",
       sortable: true,
-      selector: (row: PIIField) => row.createdAt || "",
+      selector: (row: PIIField) => getDateTimeString(row.createdAt) || "",
       id: "dateIdentified",
       grow: 2,
     },

diff --git a/frontend/src/components/Endpoint/TraceDetail.tsx b/frontend/src/components/Endpoint/TraceDetail.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import dynamic from "next/dynamic";
-import { Badge, Box, Code, ColorMode, Grid, GridItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text, useColorMode, VStack } from "@chakra-ui/react";
+import { Badge, Box, Code, ColorMode, Grid, GridItem, HStack, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text, useColorMode, VStack } from "@chakra-ui/react";
 import { ApiTrace } from "@common/types";
 import { getDateTimeString } from "../../utils";
+import { METHOD_TO_COLOR } from "../../constants";
 import { statusCodeToColor } from "../utils/StatusCode";
 const ReactJson = dynamic(() => import("react-json-view"), { ssr: false })
 
@@ -70,14 +71,24 @@ const TraceDetail: React.FC<TraceDetailProps> = React.memo(({ trace, isOpen, onC
                   <GridItem>
                     <VStack alignItems="flex-start">
                       <Text fontWeight="semibold">Path</Text>
-                      <Code p="1" rounded="md" fontSize="sm">
-                        {trace.path}
-                      </Code>
+                      <HStack>
+                        <Badge
+                          fontSize="sm"
+                          px="2"
+                          py="1"
+                          colorScheme={METHOD_TO_COLOR[trace.method] || "gray"}
+                        >
+                          {trace.method.toUpperCase()}
+                        </Badge>
+                        <Code p="1" rounded="md" fontSize="sm">
+                          {trace.path}
+                        </Code>
+                      </HStack>
                     </VStack>
                   </GridItem>
                   <GridItem>
                     <VStack alignItems="flex-start">
-                      <Text fontWeight="semibold">Method</Text>
+                      <Text fontWeight="semibold">Response Status</Text>
                       <Badge
                         fontSize="sm"
                         px="2"