show env, org, user, app names instead of id's in audit log page

Author: raheeliftikhar5

Diff for: client/packages/lowcoder/src/api/enterpriseApi.ts

@@ -72,7 +72,12 @@ export const getAuditLogStatistics = async (params = {}) => {
 };
 
 export const getMeta = async (formData = {}) => {
-  const response = await axios.post(`/api/meta`, formData);
+  const response = await axios.post(`/api/meta/`, formData);
+  return response.data;
+}
+
+export const getEnvironmentsByIds = async (formData: string[] = []) => {
+  const response = await axios.post(`/api/plugins/enterprise/environments/byIds`, formData);
   return response.data;
 }
 

Diff for: client/packages/lowcoder/src/pages/setting/audit/components/statistics.tsx

@@ -22,7 +22,7 @@ const Statistics = ({ stats }: { stats: AuditLogStat[] }) => {
   return (
     <Card size="small" variant="borderless" style={{marginBottom: '20px'}}>
       {stats.map(stat => (
-        <Card.Grid hoverable={false} style={{width, padding: '12px'}}>
+        <Card.Grid key={stat.eventType} hoverable={false} style={{width, padding: '12px'}}>
           <StyledStatistics
             title={stat.eventType.split('_').join(' ')}
             value={stat.groupCountResult}

Diff for: client/packages/lowcoder/src/pages/setting/audit/dashboard.tsx

@@ -10,9 +10,9 @@ import {
   } from "../theme/styledComponents";
 import { HeaderBack } from "pages/setting/permission/styledComponents";
 import { getUser } from "@lowcoder-ee/redux/selectors/usersSelectors";
-import { getAuditLogs, getAuditLogStatistics } from "api/enterpriseApi";
+import { getAuditLogs, getAuditLogStatistics, getEnvironmentsByIds, getMeta } from "api/enterpriseApi";
 import EventTypeTimeChart from "./charts/eventTypesTime";
-import { debounce } from "lodash";
+import { debounce, uniqBy } from "lodash";
 import { DatePicker } from "antd";
 import dayjs, { Dayjs } from "dayjs";
 import { Link, useLocation } from "react-router-dom";
@@ -59,6 +59,7 @@ export function AuditLogDashboard() {
   const [allLogs, setAllLogs] = useState<AuditLog[]>([]); 
   const [currentPageLogs, setCurrentPageLogs] = useState<AuditLog[]>([]);
   const [statistics, setStatistics] = useState<AuditLogStat[]>([]);
+  const [dataMap, setDataMap] = useState<Record<string, any>>({});
 
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
@@ -94,12 +95,44 @@ export function AuditLogDashboard() {
     form.setFieldsValue(getQueryParams());
   }, []);
 
-  const getAuditLogStatsMap = (stats: AuditLogStat[]) => {
-    const statsMap = {};
-    stats.forEach(stat => {
-      // statsMap.push({})
-    })
-  };
+  const findUniqueDataIds = async () => {
+    if (!allLogs.length) {
+      return setDataMap({});
+    }
+
+    const uniqueOrgIds: string[] = uniqBy(allLogs, 'orgId').map(item => item.orgId);
+    const uniqueUserIds: string[] = uniqBy(allLogs, 'userId').map(item => item.userId);
+    const uniqueEnvIds: string[] = uniqBy(allLogs, 'environmentId').map(item => item.environmentId);
+
+    const metaResponse = await getMeta({
+      orgIds: uniqueOrgIds,
+      userIds: uniqueUserIds,
+      appIds: [],
+      groupIds: [],
+      bundleIds: [],
+      datasourceIds: [],
+      folderIds: [],
+      libraryQueryIds: []
+    });
+
+    const envResponse = await getEnvironmentsByIds(uniqueEnvIds);
+
+    const tempDataMap: Record<string, any> = {};
+    metaResponse.data?.orgs?.forEach((org: { id: string; name: string; }) => {
+      tempDataMap[org.id] = org.name;
+    });
+    metaResponse.data?.users?.forEach((user: { id: string; name: string; }) => {
+      tempDataMap[user.id] = user.name;
+    });
+    envResponse.data?.forEach((env: { environmentId: string; environmentType: string; }) => {
+      tempDataMap[env.environmentId] = env.environmentType;
+    });
+    setDataMap(tempDataMap);
+  }
+
+  useEffect(() => {
+    findUniqueDataIds();
+  }, [allLogs]);
 
   const getCleanedParams = (newPage?: number) => {
     const formValues = form.getFieldsValue();
@@ -308,26 +341,38 @@ export function AuditLogDashboard() {
       dataIndex: "environmentId",
       key: "environmentId",
       render: (text: string) => (
-        <a onClick={() => handleClickFilter("environmentId", text)}>{text}</a>
+        <a onClick={() => handleClickFilter("environmentId", text)}>{dataMap[text] ?? text}</a>
       ),
     },
     {
       title: "Org ID",
       dataIndex: "orgId",
       key: "orgId",
-      render: (text: string) => <a onClick={() => handleClickFilter("orgId", text)}>{text}</a>,
+      render: (text: string) => (
+        <a onClick={() => handleClickFilter("orgId", text)}>{dataMap[text] ?? text}</a>
+      ),
     },
     {
       title: "User ID",
       dataIndex: "userId",
       key: "userId",
-      render: (text: string) => <a onClick={() => handleClickFilter("userId", text)}>{text}</a>,
+      render: (text: string) => (
+        <a onClick={() => handleClickFilter("userId", text)}>{dataMap[text] ?? text}</a>
+      ),
     },
     {
       title: "App ID",
       dataIndex: "appId",
       key: "appId",
-      render: (text: string) => <a onClick={() => handleClickFilter("appId", text)}>{text}</a>,
+      render: (text: string, record: any) => (
+        <a onClick={() => handleClickFilter("appId", text)}>
+          {
+            record.details?.applicationName
+            || record.details?.applicationId
+            || '-'
+          }
+        </a>
+      ),
     }
   ];
 

Diff for: client/packages/lowcoder/src/pages/setting/audit/detail.tsx

@@ -10,11 +10,10 @@ import { Map, Marker } from "pigeon-maps"
 import Tree from "antd/es/tree";
 import Empty from "antd/es/empty";
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import { getAuditLogs, getMeta } from "@lowcoder-ee/api/enterpriseApi";
+import { getAuditLogs, getEnvironmentsByIds, getMeta } from "@lowcoder-ee/api/enterpriseApi";
 import { isEmpty } from "lodash";
 import { getEventColor, getEventLabel } from "./dashboard";
 import Tag from "antd/es/tag";
-import { geoLocation } from "./auditContants";
 
 const StyleThemeSettingsCover = styled.div`
   display: flex;
@@ -31,7 +30,28 @@ const StyledTree = styled(Tree)`
   }
 
   .ant-tree-treenode {
-    margin-bottom: 24px;
+    margin-bottom: 12px;
+  }
+
+  .ant-tree-node-content-wrapper {
+    padding: 8px;
+  }
+  
+  .ant-tree-switcher {
+    padding-top: 8px;
+    &::before {
+      top: 8px;
+    }  
+  }
+
+  .ant-tree-switcher_open::after {
+    content: "";
+    width: 1px;
+    height: 100%;
+    position: absolute;
+    left: 46%;
+    top: 26px;
+    background: #d9d9d9;
   }
 
   .ant-descriptions-header {
@@ -63,8 +83,6 @@ const getResourceData = (eventType: string, eventDetail: any) => {
   return {
     ID: eventDetail.id, Name: eventDetail.name,
   }
-
-  return undefined;
 }
 
 const EventTreeNode = (props: {
@@ -80,14 +98,16 @@ const EventTreeNode = (props: {
       title={<span>{props.icon} {props.title}</span>}
     >
       {Object.keys(props.data).map(dataKey => (
-        <Descriptions.Item label={dataKey}>{props.data[dataKey] || '-'}</Descriptions.Item>
+        <Descriptions.Item key={dataKey} label={dataKey}>{props.data[dataKey] || '-'}</Descriptions.Item>
       ))}
     </Descriptions>
   )
 }
 export function AuditLogDetail() {
   const { eventId } = useParams<{eventId: string}>();
   const [ event, setEvent ] = useState<any>({});
+  const [ meta, setMeta ] = useState<any>({});
+  const [ environment, setEnvironment ] = useState<any>({});
 
   const fetchEventData = async () => {
     const response = await getAuditLogs({ eventId });
@@ -107,8 +127,14 @@ export function AuditLogDetail() {
       folderIds: [],
       libraryQueryIds: []
     });
-    console.log(response);
-    // setEvent(response?.data?.[0]);
+    setMeta(response.data);
+  }
+
+  const fetchEnvironmentData = async () => {
+    if (isEmpty(event)) return;
+  
+    const response = await getEnvironmentsByIds([event.environmentId]);
+    setEnvironment(response.data?.[0] || {});
   }
 
   useEffect(() => {
@@ -117,7 +143,8 @@ export function AuditLogDetail() {
 
   useEffect(() => {
     fetchEventMeta();
-  }, [event]);
+    fetchEnvironmentData();
+  }, [JSON.stringify(event)]);
 
   const eventHierarchy = useMemo(() => {
     if (isEmpty(event)) return [];
@@ -175,7 +202,10 @@ export function AuditLogDetail() {
           <EventTreeNode
             icon={<EnvironmentOutlined />}
             title="Environment"
-            data={{ ID: event?.environmentId, Name: event?.environmentName}}
+            data={{
+              ID: event?.environmentId,
+              Name: environment?.environmentType || '-'
+            }}
           />
         ),
         key: "0",
@@ -185,7 +215,10 @@ export function AuditLogDetail() {
               <EventTreeNode
                 icon={<TeamOutlined />}
                 title="Workspace"
-                data={{ ID: event?.orgId, Name: event?.orgName}}
+                data={{
+                  ID: event?.orgId,
+                  Name: meta?.orgs?.[0]?.name || '-',
+                }}
               />
             ),
             key: "0-0",
@@ -195,7 +228,10 @@ export function AuditLogDetail() {
                   <EventTreeNode
                     icon={<UserOutlined />}
                     title="User"
-                    data={{ ID: event?.userId, Name: event?.userName}}
+                    data={{
+                      ID: event?.userId,
+                      Name: meta?.users?.[0]?.name || '-',
+                    }}
                   />
                 ),
                 key: "0-0-0",
@@ -206,7 +242,7 @@ export function AuditLogDetail() {
         ],
       },
     ];
-  }, [event]);
+  }, [event, meta, environment]);
 
   if (!Boolean(event)) {
     return (
@@ -254,7 +290,7 @@ export function AuditLogDetail() {
           <h2 style={{ color: "#ffffff", marginTop: "8px" }}>Browser / System Metadata</h2>
         </StyleThemeSettingsCover>
         <Card size="small" style={{ marginBottom: "20px", borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
-          <Descriptions bordered column={1}>
+          <Descriptions bordered column={1} size="small">
             <Descriptions.Item label={<span><ChromeOutlined className="text-lg mr-2" /> Browser</span>}>{event?.agentName}</Descriptions.Item>
             <Descriptions.Item label={<span><AppleOutlined className="text-lg mr-2" /> OS</span>}>{event?.operatingSystemName} ({event?.operatingSystemVersion})</Descriptions.Item>
             <Descriptions.Item label={<span><DesktopOutlined className="text-lg mr-2" /> Device</span>}>{event?.deviceName}</Descriptions.Item>