awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 02:51:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: updated ui

Browse Source
This commit is contained in:
=
2025-03-19 20:33:31 +05:30
parent 747b5ec68d
commit c4b7d4618d
2 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx
+12 -24
View File
@@ -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 (
<div className="flex items-center space-x-2">
<div className="rounded bg-bunker-800 p-1 py-0.5 font-mono">{label}: </div>
<div className="flex items-center space-x-1.5">
<div className="rounded bg-mineshaft-600 p-0.5 pl-1 font-mono">{label}:</div>
<div>{value}</div>
</div>
);
};
export const LogsTableRow = ({ auditLog }: Props) => {
export const LogsTableRow = ({ auditLog, rowNumber }: Props) => {
const [isOpen, setIsOpen] = useToggle();
return (
<>
<Tr
className="h-10 cursor-pointer border-x-0 border-b border-t-0"
className="h-10 cursor-pointer border-x-0 border-b border-t-0 hover:bg-mineshaft-700"
role="button"
tabIndex={0}
onClick={() => setIsOpen.toggle()}
@@ -41,43 +42,30 @@ export const LogsTableRow = ({ auditLog }: Props) => {
}}
isHoverable
>
<Td className="align-top">
<Td className="flex items-center gap-2 pr-0 align-top">
<FontAwesomeIcon icon={isOpen ? faCaretDown : faCaretRight} />
{rowNumber}
</Td>
<Td className="align-top">
{format(new Date(auditLog.createdAt), "MMM do yyyy, hh:mm a")}
</Td>
<Td>
<div className="flex flex-wrap gap-2 text-sm">
<div className="flex flex-wrap gap-4 text-sm">
<Tag label="event" value={auditLog.event.type} />
<Tag label="actor" value={auditLog.actor.type} />
{auditLog.actor.type === ActorType.USER && (
<>
<Tag label="user_email" value={auditLog.actor.metadata.email} />
<Tag label="user_id" value={auditLog.actor.metadata.userId} />
</>
<Tag label="user_email" value={auditLog.actor.metadata.email} />
)}
{auditLog.actor.type === ActorType.IDENTITY && (
<>
<Tag label="identity_name" value={auditLog.actor.metadata.name} />
<Tag label="identity_id" value={auditLog.actor.metadata.identityId} />
</>
<Tag label="identity_name" value={auditLog.actor.metadata.name} />
)}
{auditLog.projectId && auditLog.projectName && (
<>
<Tag label="project_name" value={auditLog.projectName} />
<Tag label="project_id" value={auditLog.projectId} />
</>
)}
<Tag label="ip" value={auditLog.ipAddress} />
<Tag label="agent" value={auditLog.userAgent} />
</div>
</Td>
</Tr>
{isOpen && (
<Tr className={`log-${auditLog.id} h-10 border-x-0 border-b border-t-0`}>
<Td colSpan={3}>
<div className="thin-scrollbar my-1 max-h-96 overflow-auto whitespace-pre-wrap rounded bg-bunker-800 p-2 font-mono leading-6">
<Td colSpan={3} className="px-3 py-2">
<div className="thin-scrollbar my-1 max-h-96 overflow-auto whitespace-pre-wrap rounded border border-mineshaft-600 bg-bunker-800 p-2 font-mono leading-6">
{JSON.stringify(auditLog, null, 4)}
</div>
</Td>