feat: updated ui

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) => {
         <Table>
           <THead>
             <Tr>
-              <Th className="w-8" />
+              <Th className="w-24" />
-              <Th className="w-64">Timestamp</Th>
+              <Th className="w-64">
+                Timestamp
+                <Tooltip
+                  className="normal-case"
+                  content="Time displayed in your system's time zone."
+                  sideOffset={10}
+                >
+                  <FontAwesomeIcon icon={faInfoCircle} className="ml-1" />
+                </Tooltip>
+              </Th>
               <Th>Event</Th>
             </Tr>
           </THead>
@@ -59,12 +70,16 @@ export const LogsTable = ({ filter, refetchInterval }: Props) => {
             {!isPending &&
               data?.pages?.map((group, i) => (
                 <Fragment key={`audit-log-fragment-${i + 1}`}>
-                  {group.map((auditLog) => (
+                  {group.map((auditLog, index) => (
-                    <LogsTableRow auditLog={auditLog} key={`audit-log-${auditLog.id}`} />
+                    <LogsTableRow
+                      rowNumber={index + i * AUDIT_LOG_LIMIT + 1}
+                      auditLog={auditLog}
+                      key={`audit-log-${auditLog.id}`}
+                    />
                   ))}
                 </Fragment>
               ))}
-            {isPending && <TableSkeleton innerKey="logs-table" columns={5} key="logs" />}
+            {isPending && <TableSkeleton innerKey="logs-table" columns={3} key="logs-loading" />}
             {isEmpty && (
               <Tr>
                 <Td colSpan={3}>

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 (
-    <div className="flex items-center space-x-2">
+    <div className="flex items-center space-x-1.5">
-      <div className="rounded bg-bunker-800 p-1 py-0.5 font-mono">{label}: </div>
+      <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_email" value={auditLog.actor.metadata.email} />
-                <Tag label="user_id" value={auditLog.actor.metadata.userId} />
-              </>
             )}
             {auditLog.actor.type === ActorType.IDENTITY && (
-              <>
+              <Tag label="identity_name" value={auditLog.actor.metadata.name} />
-                <Tag label="identity_name" value={auditLog.actor.metadata.name} />
-                <Tag label="identity_id" value={auditLog.actor.metadata.identityId} />
-              </>
             )}
-            {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}>
+          <Td colSpan={3} className="px-3 py-2">
-            <div className="thin-scrollbar my-1 max-h-96 overflow-auto whitespace-pre-wrap rounded bg-bunker-800 p-2 font-mono leading-6">
+            <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>