Skip to content

Commit 33b5836

Browse files
author
FalkWolsky
committed
Audit Log hierarchical
1 parent fb544a4 commit 33b5836

File tree

3 files changed

+261
-143
lines changed

3 files changed

+261
-143
lines changed

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2374,6 +2374,43 @@ export const en = {
23742374
"enterprise" : {
23752375
"AuditLogTitle": "Audit Log Dasboard",
23762376
"AuditLogOverview": "Overview",
2377+
"USER_LOGIN" : "User Login ",
2378+
"USER_LOGOUT" : "User Logout ",
2379+
"APPLICATION_VIEW" : "View Application ",
2380+
"APPLICATION_CREATE" : "Create Application ",
2381+
"APPLICATION_DELETE" : "Delete Application ",
2382+
"APPLICATION_UPDATE" : "Update Application ",
2383+
"APPLICATION_MOVE" : "Move Application ",
2384+
"APPLICATION_RECYCLED" : "Recycle Application ",
2385+
"APPLICATION_RESTORE" : "Restore Application ",
2386+
"APPLICATION_PUBLISH" : "Application Publishing ",
2387+
"APPLICATION_VERSION_CHANGE" : "Application Version Update ",
2388+
"APPLICATION_SHARING_CHANGE" : "Application Sharing Change ",
2389+
"APPLICATION_PERMISSION_CHANGE" : "Application Permission Change ",
2390+
"FOLDER_CREATE" : "Create Folder ",
2391+
"FOLDER_DELETE" : "Delete Folder ",
2392+
"FOLDER_UPDATE" : "Update Folder ",
2393+
"QUERY_EXECUTION" : "Execute Query ",
2394+
"GROUP_CREATE" : "Create Group ",
2395+
"GROUP_UPDATE" : "Update Group ",
2396+
"GROUP_DELETE" : "Delete Group ",
2397+
"GROUP_MEMBER_ADD" : "Add Group Member ",
2398+
"GROUP_MEMBER_ROLE_UPDATE" : "Update Group Member Role ",
2399+
"GROUP_MEMBER_LEAVE" : "Leave Group ",
2400+
"GROUP_MEMBER_REMOVE" : "Remove Group Member ",
2401+
"SERVER_START_UP" : "Server Startup ",
2402+
"SERVER_INFO" : "View Server Info ",
2403+
"DATA_SOURCE_CREATE" : "Create Datasource ",
2404+
"DATA_SOURCE_UPDATE" : "Update Datasource ",
2405+
"DATA_SOURCE_DELETE" : "Delete Datasource ",
2406+
"DATA_SOURCE_PERMISSION_GRANT" : "Grant Datasource Permission ",
2407+
"DATA_SOURCE_PERMISSION_UPDATE" : "Update Datasource Permission ",
2408+
"DATA_SOURCE_PERMISSION_DELETE" : "Delete Datasource Permission ",
2409+
"LIBRARY_QUERY_CREATE" : "Create Library Query ",
2410+
"LIBRARY_QUERY_UPDATE" : "Update Library Query ",
2411+
"LIBRARY_QUERY_DELETE" : "Delete Library Query ",
2412+
"LIBRARY_QUERY_PUBLISH" : "Publish Library Query ",
2413+
"API_CALL_EVENT" : "API Call Event ",
23772414
},
23782415

23792416
"subscription": {

‎client/packages/lowcoder/src/pages/setting/audit/charts/eventTypesTime.tsx

Lines changed: 91 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,109 @@
1-
import React from "react";
1+
import React, { useRef } from "react";
22
import ReactECharts from "echarts-for-react";
3+
import dayjs from "dayjs";
4+
import { debounce } from "lodash";
35

46
interface Props {
5-
data: Array<any>;
6-
eventTypeLabels : any;
7+
data: Array<any>;
8+
eventTypeLabels: any;
9+
setDateRange: (range: { fromTimestamp: string; toTimestamp: string }) => void;
710
}
811

9-
const EventTypeTimeChart = ({ data, eventTypeLabels }: Props) => {
10-
const getChartOptions = () => {
11-
// Group data by date and eventType
12-
const groupedData = data.reduce((acc: any, log: any) => {
13-
// Validate and parse eventTime
14-
const eventTime = log.eventTime ? new Date(log.eventTime) : null;
12+
const EventTypeTimeChart = ({ data, eventTypeLabels, setDateRange }: Props) => {
13+
const chartRef = useRef<any>(null);
1514

16-
if (eventTime && !isNaN(eventTime.getTime())) {
17-
const date = eventTime.toISOString().split("T")[0]; // Extract date part
18-
if (!acc[date]) acc[date] = {};
19-
acc[date][log.eventType] = (acc[date][log.eventType] || 0) + 1;
20-
} else {
21-
console.warn("Invalid or missing eventTime:", log.eventTime);
22-
}
15+
const debouncedSetDateRange = useRef(
16+
debounce((fromTimestamp: string, toTimestamp: string) => {
17+
setDateRange({ fromTimestamp, toTimestamp });
18+
}, 500) // Delays fetching only after zooming stops
19+
).current;
2320

24-
return acc;
25-
}, {});
21+
// Extract min/max dates from the data
22+
const allDates = data.map((log) => log.eventTime && dayjs(log.eventTime).format("YYYY-MM-DD"));
23+
const minDate = allDates.length ? dayjs(Math.min(...allDates.map((d) => new Date(d).getTime()))) : dayjs().subtract(7, "days");
24+
const maxDate = allDates.length ? dayjs(Math.max(...allDates.map((d) => new Date(d).getTime()))) : dayjs();
2625

27-
// Extract sorted dates and unique event types
28-
const dates = Object.keys(groupedData).sort();
29-
const eventTypes = [...new Set(data.map((log: any) => log.eventType))];
26+
// Generate full date range including missing days
27+
const fullDateRange: string[] = [];
28+
let currentDate = minDate;
29+
while (currentDate.isBefore(maxDate) || currentDate.isSame(maxDate, "day")) {
30+
fullDateRange.push(currentDate.format("YYYY-MM-DD"));
31+
currentDate = currentDate.add(1, "day");
32+
}
3033

31-
console.log("Dates:", dates);
32-
console.log("Event Types:", eventTypes);
34+
// Group data by date and eventType
35+
const groupedData = data.reduce((acc: any, log: any) => {
36+
const eventTime = log.eventTime ? new Date(log.eventTime) : null;
37+
if (eventTime && !isNaN(eventTime.getTime())) {
38+
const date = eventTime.toISOString().split("T")[0]; // Extract date part
39+
if (!acc[date]) acc[date] = {};
40+
acc[date][log.eventType] = (acc[date][log.eventType] || 0) + 1;
41+
}
42+
return acc;
43+
}, {});
3344

34-
// Prepare series data for each event type
35-
const series = eventTypes.map((eventType) => ({
36-
name: eventTypeLabels[eventType] || eventType,
37-
type: "bar",
38-
stack: "total",
39-
data: dates.map((date) => groupedData[date][eventType] || 0), // Fill gaps with 0
40-
}));
45+
// Get unique event types
46+
const eventTypes = [...new Set(data.map((log: any) => log.eventType))];
4147

42-
console.log("Series Data:", series);
48+
// Prepare series data for each event type
49+
const series = eventTypes.map((eventType) => ({
50+
name: eventTypeLabels[eventType] || eventType,
51+
type: "bar",
52+
stack: "total",
53+
data: fullDateRange.map((date) => groupedData[date]?.[eventType] || 0), // Fill gaps with 0
54+
}));
4355

44-
return {
45-
title: { text: "Event Types Over Time", left: "center" },
46-
tooltip: {
47-
trigger: "axis",
48-
axisPointer: { type: "shadow" },
49-
},
50-
legend: { top: 20 },
51-
grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
52-
xAxis: {
53-
type: "category",
54-
data: dates,
55-
axisLabel: { rotate: 45 },
56-
},
57-
yAxis: {
58-
type: "value",
59-
},
60-
series,
61-
};
62-
};
56+
const handleChartEvents = (params: any) => {
57+
if (params.start !== undefined && params.end !== undefined) {
58+
const startIndex = Math.floor((params.start / 100) * (fullDateRange.length - 1));
59+
const endIndex = Math.floor((params.end / 100) * (fullDateRange.length - 1));
60+
61+
const fromDate = new Date(fullDateRange[startIndex] || fullDateRange[0]); // Keep start of day
62+
const toDate = new Date(fullDateRange[endIndex] || fullDateRange[fullDateRange.length - 1]);
6363

64+
toDate.setHours(23, 59, 59, 999);
65+
66+
const fromTimestamp = fromDate.toISOString();
67+
const toTimestamp = toDate.toISOString();
68+
debouncedSetDateRange(fromTimestamp, toTimestamp);
69+
}
70+
};
71+
6472
return (
6573
<ReactECharts
66-
option={getChartOptions()}
74+
ref={chartRef}
75+
option={{
76+
title: { text: "Audit Log", left: "center" },
77+
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
78+
legend: { left: "left", orient: "vertical", top: "12%" }, // Ensure labels are on the left
79+
grid: { left: "20%", right: "4%", bottom: "3%", containLabel: true },
80+
xAxis: {
81+
type: "category",
82+
data: fullDateRange,
83+
axisLabel: { rotate: 45 },
84+
},
85+
yAxis: {
86+
type: "value",
87+
},
88+
dataZoom: [
89+
{
90+
type: "slider",
91+
xAxisIndex: 0,
92+
filterMode: "weakFilter",
93+
show: true,
94+
start: 0,
95+
end: 100,
96+
realtime: false,
97+
},
98+
{
99+
type: "inside",
100+
xAxisIndex: 0,
101+
realtime: false,
102+
},
103+
],
104+
series,
105+
}}
106+
onEvents={{ dataZoom: handleChartEvents }}
67107
style={{ height: "400px", marginBottom: "20px" }}
68108
/>
69109
);

0 commit comments

Comments
 (0)