Wired frontend for logs

backend/src/ee/controllers/v1/workspaceController.ts

@@ -59,6 +59,7 @@ export const getWorkspaceLogs = async (req: Request, res: Response) => {
 				} : {}
 			)
 		})
+		.sort({ createdAt: -1 })
 		.skip(offset)
 		.limit(limit)
 		.populate('actions')

frontend/components/basic/EventFilter.tsx

@@ -48,7 +48,7 @@ export default function EventFilter({
       <div className="relative">
         <Listbox.Button className="bg-mineshaft-800 hover:bg-mineshaft-700 duration-200 cursor-pointer rounded-md h-10 flex items-center justify-between pl-4 pr-2 w-52 text-bunker-200 text-sm">
           {selected != '' ? (
-            <p className="select-none text-bunker-100">{selected}</p>
+            <p className="select-none text-bunker-100">{t("activity:event." + selected)}</p>
           ) : (
             <p className="select-none">Select an event</p>
           )}
@@ -76,7 +76,7 @@ export default function EventFilter({
                   className={`px-4 h-10 flex items-center text-sm cursor-pointer hover:bg-mineshaft-700 text-bunker-200 rounded-md ${
                     selected == t("activity:event." + event.name) && 'bg-mineshaft-700'
                   }`}
-                  value={t("activity:event." + event.name)}
+                  value={event.name}
                 >
                   {({ selected }) => (
                     <>
@@ -90,7 +90,6 @@ export default function EventFilter({
                       </span>
                     </>
                   )}
-                  {/* <FontAwesomeIcon icon={event.icon} className="pr-4" /> {event.name} */}
                 </Listbox.Option>
               );
             })}

frontend/ee/api/secrets/GetProjectLogs.ts

@@ -5,7 +5,8 @@ interface workspaceProps {
   workspaceId: string; 
   offset: number;
   limit: number;
-  filters: object;
+  userId: string;
+  actionNames: string;
 }
 
 /**
@@ -14,17 +15,41 @@ interface workspaceProps {
  * @param {string} obj.workspaceId - workspace id for which we are trying to get project log 
  * @param {object} obj.offset - teh starting point of logs that we want to pull
  * @param {object} obj.limit - how many logs will we output
- * @param {object} obj.filters
+ * @param {object} obj.userId - optional userId filter - will only query logs for that user
+ * @param {string} obj.actionNames - optional actionNames filter - will only query logs for those actions
  * @returns
  */
-const getProjectLogs = async ({ workspaceId, offset, limit, filters }: workspaceProps) => {
+const getProjectLogs = async ({ workspaceId, offset, limit, userId, actionNames }: workspaceProps) => {
+  let payload;
+  if (userId != "" && actionNames != '') {
+    payload = {
+      offset: String(offset),
+      limit: String(limit),
+      userId: JSON.stringify(userId),
+      actionNames: actionNames
+    }
+  } else if (userId != "") {
+    payload = {
+      offset: String(offset),
+      limit: String(limit),
+      userId: JSON.stringify(userId)
+    }
+  } else if (actionNames != "") {
+    payload = {
+      offset: String(offset),
+      limit: String(limit),
+      actionNames: actionNames
+    }
+  } else {
+    payload = {
+      offset: String(offset),
+      limit: String(limit)
+    }
+  }
+  
   return SecurityClient.fetchCall(
     '/api/v1/workspace/' + workspaceId + '/logs?' +
-      new URLSearchParams({
-        offset: String(offset),
-        limit: String(limit),
-        filters: JSON.stringify(filters)
-      }),
+      new URLSearchParams(payload),
     {
       method: 'GET',
       headers: {

frontend/pages/activity/[id].tsx

@@ -55,9 +55,34 @@ export default function Activity() {
   const [currentEvent, setCurrentEvent] = useState("");
   const { t } = useTranslation();
 
+  // this use effect updates the data in case of a new filter being added
+  useEffect(() => {
+    setCurrentOffset(0);
+    const getLogData = async () => {
+      const tempLogsData = await getProjectLogs({ workspaceId: String(router.query.id), offset: 0, limit: currentLimit, userId: "", actionNames: eventChosen })
+      setLogsData(tempLogsData.map((log: logData) => {
+        return {
+          _id: log._id, 
+          channel: log.channel, 
+          createdAt: log.createdAt, 
+          ipAddress: log.ipAddress, 
+          user: log.user.email, 
+          payload: log.actions.map(action => {
+            return {
+              name: action.name,
+              secretVersions: action.payload.secretVersions
+            }
+          })
+        }
+      }))
+    }
+    getLogData();
+  }, [eventChosen]);
+
+  // this use effect adds more data in case 'View More' button is clicked
   useEffect(() => {
     const getLogData = async () => {
-      const tempLogsData = await getProjectLogs({ workspaceId: String(router.query.id), offset: currentOffset, limit: currentLimit, filters: {} })
+      const tempLogsData = await getProjectLogs({ workspaceId: String(router.query.id), offset: currentOffset, limit: currentLimit, userId: "", actionNames: eventChosen })
       setLogsData(logsData.concat(tempLogsData.map((log: logData) => {
         return {
           _id: log._id, 
@@ -97,16 +122,10 @@ export default function Activity() {
         <EventFilter 
           selected={eventChosen}
           select={setEventChosen}
-          data={["readSecrets", "updateSecrets", "addSecrets"]}
-          isFull={false}
         />
       </div>
       <ActivityTable
-        data={logsData!.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
-          .filter((log) =>
-            eventChosen != '' ? log.payload?.map(action => t("activity:event." + action.name)).includes(eventChosen) : true
-          )
-        }
+        data={logsData}
         toggleSidebar={toggleSidebar}
         setCurrentEvent={setCurrentEvent}
       />