diff --git a/frontend/src/pages/organization/AuditLogsPage/components/LogsTable.tsx b/frontend/src/pages/organization/AuditLogsPage/components/LogsTable.tsx index 3f7cd2be6..69b550144 100644 --- a/frontend/src/pages/organization/AuditLogsPage/components/LogsTable.tsx +++ b/frontend/src/pages/organization/AuditLogsPage/components/LogsTable.tsx @@ -1,5 +1,6 @@ import { Fragment } from "react"; -import { faFile } from "@fortawesome/free-solid-svg-icons"; +import { faFile, faInfoCircle } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Button, @@ -11,6 +12,7 @@ import { Td, Th, THead, + Tooltip, Tr } from "@app/components/v2"; import { useGetAuditLogs } from "@app/hooks/api"; @@ -50,8 +52,17 @@ export const LogsTable = ({ filter, refetchInterval }: Props) => { - + @@ -59,12 +70,16 @@ export const LogsTable = ({ filter, refetchInterval }: Props) => { {!isPending && data?.pages?.map((group, i) => ( - {group.map((auditLog) => ( - + {group.map((auditLog, index) => ( + ))} ))} - {isPending && } + {isPending && } {isEmpty && ( setIsOpen.toggle()} @@ -41,43 +42,30 @@ export const LogsTableRow = ({ auditLog }: Props) => { }} isHoverable > - {isOpen && ( -
- Timestamp + + Timestamp + + + + Event
diff --git a/frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx b/frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx index c6ba1e980..26404ccbf 100644 --- a/frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx +++ b/frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx @@ -9,6 +9,7 @@ import { AuditLog } from "@app/hooks/api/auditLogs/types"; type Props = { auditLog: AuditLog; + rowNumber: number; }; type TagProps = { @@ -19,20 +20,20 @@ const Tag = ({ label, value }: TagProps) => { if (!value) return null; return ( -
-
{label}:
+
+
{label}:
{value}
); }; -export const LogsTableRow = ({ auditLog }: Props) => { +export const LogsTableRow = ({ auditLog, rowNumber }: Props) => { const [isOpen, setIsOpen] = useToggle(); return ( <>
+ + {rowNumber} {format(new Date(auditLog.createdAt), "MMM do yyyy, hh:mm a")} -
+
{auditLog.actor.type === ActorType.USER && ( - <> - - - + )} {auditLog.actor.type === ActorType.IDENTITY && ( - <> - - - + )} - {auditLog.projectId && auditLog.projectName && ( - <> - - - - )} - -
-
+
+
{JSON.stringify(auditLog, null, 4)}