awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-12 07:29:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finished activity logs V1

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-01-02 14:20:39 -08:00
parent 03b7d3a5ce
commit ae5320e4fa
5 changed files with 220 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/ee/components/ActivityTable.tsx
+20 -23
View File
@@ -4,8 +4,7 @@ import { useTranslation } from "next-i18next";
import {
faAngleDown,
faAngleRight,
faUpRightFromSquare,
faX
faUpRightFromSquare
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import timeSince from 'ee/utilities/timeSince';
@@ -14,6 +13,7 @@ import guidGenerator from '../../components/utilities/randomId';
interface PayloadProps {
_id: string;
name: string;
secretVersions: string[];
}
@@ -29,25 +29,26 @@ interface logData {
/**
*
* This is a single row of the activity table
* @param obj
* @param {function} obj.setCurrentEvent - specify the name of the event for which the sidebar is being opened
* @param {logData} obj.row - data for a certain event
* @param {function} obj.toggleSidebar - open and close sidebar that displays data for a specific event
* @returns
*/
const ActivityLogsRow = ({ row, toggleSidebar, setCurrentEvent }: { row: logData, toggleSidebar: (value: string[]) => void; setCurrentEvent: (value: string) => void; }) => {
const ActivityLogsRow = ({ row, toggleSidebar }: { row: logData, toggleSidebar: (value: string) => void; }) => {
const [payloadOpened, setPayloadOpened] = useState(false);
const { t } = useTranslation();
return (
<>
<tr key={guidGenerator()} className="bg-bunker-800 duration-100 w-full">
<tr key={guidGenerator()} className="bg-bunker-800 duration-100 w-full text-sm">
<td
onClick={() => setPayloadOpened(!payloadOpened)}
className="border-mineshaft-700 border-t text-gray-300 flex items-center cursor-pointer"
>
<FontAwesomeIcon
icon={payloadOpened ? faAngleDown : faAngleRight}
className={`mt-3 ml-6 text-bunker-100 hover:bg-mineshaft-700 ${
className={`mt-2.5 ml-6 text-bunker-100 hover:bg-mineshaft-700 ${
payloadOpened && 'bg-mineshaft-500'
} p-1 duration-100 h-4 w-4 rounded-md`}
/>
@@ -66,26 +67,23 @@ const ActivityLogsRow = ({ row, toggleSidebar, setCurrentEvent }: { row: logData
</td>
</tr>
{payloadOpened &&
<tr className='h-9 text-bunker-200 border-mineshaft-700 border-t'>
<tr className='h-9 text-bunker-200 border-mineshaft-700 border-t text-sm'>
<td></td>
<td>Timestamp</td>
<td>{row.createdAt}</td>
</tr>}
{payloadOpened &&
row.payload?.map((action, index) =>
<tr key={index} className="h-9 text-bunker-200 border-mineshaft-700 border-t">
<tr key={index} className="h-9 text-bunker-200 border-mineshaft-700 border-t text-sm">
<td></td>
<td className="">{t("activity:event." + action.name)}</td>
<td className="text-primary-300 cursor-pointer hover:text-primary duration-200" onClick={() => {
toggleSidebar(action.secretVersions);
setCurrentEvent(action.name);
}}>
<td className="text-primary-300 cursor-pointer hover:text-primary duration-200" onClick={() => toggleSidebar(action._id)}>
{action.secretVersions.length + (action.secretVersions.length != 1 ? " secrets" : " secret")}
<FontAwesomeIcon icon={faUpRightFromSquare} className="ml-2 mb-0.5 font-light w-3 h-3"/>
</td>
</tr>)}
{payloadOpened &&
<tr className='h-9 text-bunker-200 border-mineshaft-700 border-t'>
<tr className='h-9 text-bunker-200 border-mineshaft-700 border-t text-sm'>
<td></td>
<td>IP Address</td>
<td>{row.ipAddress}</td>
@@ -99,28 +97,27 @@ const ActivityLogsRow = ({ row, toggleSidebar, setCurrentEvent }: { row: logData
* @param {object} obj
* @param {logData} obj.data - data for user activity logs
* @param {function} obj.toggleSidebar - function that opens or closes the sidebar
* @param {function} obj.setCurrentEvent - specify the name of the event for which the sidebar is being opened
* @returns
*/
const ActivityTable = ({ data, toggleSidebar, setCurrentEvent }: { data: logData[], toggleSidebar: (value: string[]) => void; setCurrentEvent: (value: string) => void; }) => {
const ActivityTable = ({ data, toggleSidebar }: { data: logData[], toggleSidebar: (value: string) => void; }) => {
return (
<div className="w-full px-6 mt-8">
<div className="table-container w-full bg-bunker rounded-md mb-6 border border-mineshaft-700 relative">
<div className="absolute rounded-t-md w-full h-[3.15rem] bg-white/5"></div>
<div className="absolute rounded-t-md w-full h-[3rem] bg-white/5"></div>
<table className="w-full my-1">
<thead className="text-bunker-300">
<tr>
<tr className='text-sm'>
<th className="text-left pl-6 pt-2.5 pb-3"></th>
<th className="text-left pt-2.5 pb-3">Event</th>
<th className="text-left pl-6 pt-2.5 pb-3">User</th>
<th className="text-left pl-6 pt-2.5 pb-3">Source</th>
<th className="text-left pl-6 pt-2.5 pb-3">Time</th>
<th className="text-left font-semibold pt-2.5 pb-3">EVENT</th>
<th className="text-left font-semibold pl-6 pt-2.5 pb-3">USER</th>
<th className="text-left font-semibold pl-6 pt-2.5 pb-3">SOURCE</th>
<th className="text-left font-semibold pl-6 pt-2.5 pb-3">TIME</th>
<th></th>
</tr>
</thead>
<tbody>
{data?.map((row, index) => {
return <ActivityLogsRow key={index} row={row} toggleSidebar={toggleSidebar} setCurrentEvent={setCurrentEvent} />;
return <ActivityLogsRow key={index} row={row} toggleSidebar={toggleSidebar} />;
})}
</tbody>
</table>