Audit log table and modal

jc21 · jc21 · commit 2b88f56d226b · 2025-09-15T15:56:24.000+10:00
diff --git a/backend/internal/audit-log.js b/backend/internal/audit-log.js
@@ -36,6 +36,35 @@ const internalAuditLog = {
 		return await query;
 	},
 
+	/**
+	 * @param  {Access}   access
+	 * @param  {Object}   [data]
+	 * @param  {Integer}  [data.id]          Defaults to the token user
+	 * @param  {Array}    [data.expand]
+	 * @return {Promise}
+	 */
+	get: async (access, data) => {
+		await access.can("auditlog:list");
+
+		const query = auditLogModel
+			.query()
+			.andWhere("id", data.id)
+			.allowGraph("[user]")
+			.first();
+
+		if (typeof data.expand !== "undefined" && data.expand !== null) {
+			query.withGraphFetched(`[${data.expand.join(", ")}]`);
+		}
+
+		const row = await query;
+
+		if (!row?.id) {
+			throw new errs.ItemNotFoundError(data.id);
+		}
+
+		return row;
+	},
+
 	/**
 	 * This method should not be publicly used, it doesn't check certain things. It will be assumed
 	 * that permission to add to audit log is already considered, however the access token is used for
diff --git a/backend/routes/audit-log.js b/backend/routes/audit-log.js
@@ -52,4 +52,56 @@ router
 		}
 	});
 
+/**
+ * Specific audit log entry
+ *
+ * /api/audit-log/123
+ */
+router
+	.route("/:event_id")
+	.options((_, res) => {
+		res.sendStatus(204);
+	})
+	.all(jwtdecode())
+
+	/**
+	 * GET /api/audit-log/123
+	 *
+	 * Retrieve a specific entry
+	 */
+	.get(async (req, res, next) => {
+		try {
+			const data = await validator(
+				{
+					required: ["event_id"],
+					additionalProperties: false,
+					properties: {
+						event_id: {
+							$ref: "common#/properties/id",
+						},
+						expand: {
+							$ref: "common#/properties/expand",
+						},
+					},
+				},
+				{
+					event_id: req.params.event_id,
+					expand:
+						typeof req.query.expand === "string"
+							? req.query.expand.split(",")
+							: null,
+				},
+			);
+
+			const item = await internalAuditLog.get(res.locals.access, {
+				id: data.event_id,
+				expand: data.expand,
+			});
+			res.status(200).send(item);
+		} catch (err) {
+			logger.debug(`${req.method.toUpperCase()} ${req.path}: ${err}`);
+			next(err);
+		}
+	});
+
 export default router;
diff --git a/frontend/src/api/backend/getAuditLog.ts b/frontend/src/api/backend/getAuditLog.ts
@@ -1,9 +1,10 @@
 import * as api from "./base";
+import type { AuditLogExpansion } from "./getAuditLogs";
 import type { AuditLog } from "./models";
 
-export async function getAuditLog(expand?: string[], params = {}): Promise<AuditLog[]> {
+export async function getAuditLog(id: number, expand?: AuditLogExpansion[], params = {}): Promise<AuditLog> {
 	return await api.get({
-		url: "/audit-log",
+		url: `/audit-log/${id}`,
 		params: {
 			expand: expand?.join(","),
 			...params,
diff --git a/frontend/src/api/backend/getAuditLogs.ts b/frontend/src/api/backend/getAuditLogs.ts
@@ -0,0 +1,14 @@
+import * as api from "./base";
+import type { AuditLog } from "./models";
+
+export type AuditLogExpansion = "user";
+
+export async function getAuditLogs(expand?: AuditLogExpansion[], params = {}): Promise<AuditLog[]> {
+	return await api.get({
+		url: "/audit-log",
+		params: {
+			expand: expand?.join(","),
+			...params,
+		},
+	});
+}
diff --git a/frontend/src/api/backend/index.ts b/frontend/src/api/backend/index.ts
@@ -16,6 +16,7 @@ export * from "./downloadCertificate";
 export * from "./getAccessList";
 export * from "./getAccessLists";
 export * from "./getAuditLog";
+export * from "./getAuditLogs";
 export * from "./getCertificate";
 export * from "./getCertificates";
 export * from "./getDeadHost";
diff --git a/frontend/src/api/backend/models.ts b/frontend/src/api/backend/models.ts
@@ -40,6 +40,8 @@ export interface AuditLog {
 	objectId: number;
 	action: string;
 	meta: Record<string, any>;
+	// Expansions:
+	user?: User;
 }
 
 export interface AccessList {
diff --git a/frontend/src/components/Table/Formatter/DomainsFormatter.tsx b/frontend/src/components/Table/Formatter/DomainsFormatter.tsx
@@ -1,5 +1,4 @@
-import { intlFormat, parseISO } from "date-fns";
-import { intl } from "src/locale";
+import { DateTimeFormat, intl } from "src/locale";
 
 interface Props {
 	domains: string[];
@@ -17,7 +16,7 @@ export function DomainsFormatter({ domains, createdOn }: Props) {
 			</div>
 			{createdOn ? (
 				<div className="text-secondary mt-1">
-					{intl.formatMessage({ id: "created-on" }, { date: intlFormat(parseISO(createdOn)) })}
+					{intl.formatMessage({ id: "created-on" }, { date: DateTimeFormat(createdOn) })}
 				</div>
 			) : null}
 		</div>
diff --git a/frontend/src/components/Table/Formatter/EventFormatter.tsx b/frontend/src/components/Table/Formatter/EventFormatter.tsx
@@ -0,0 +1,53 @@
+import { IconUser } from "@tabler/icons-react";
+import type { AuditLog } from "src/api/backend";
+import { DateTimeFormat, intl } from "src/locale";
+
+const getEventTitle = (event: AuditLog) => (
+	<span>{intl.formatMessage({ id: `event.${event.action}-${event.objectType}` })}</span>
+);
+
+const getEventValue = (event: AuditLog) => {
+	switch (event.objectType) {
+		case "user":
+			return event.meta?.name;
+		default:
+			return `UNKNOWN EVENT TYPE: ${event.objectType}`;
+	}
+};
+
+const getColorForAction = (action: string) => {
+	switch (action) {
+		case "created":
+			return "text-lime";
+		case "deleted":
+			return "text-red";
+		default:
+			return "text-blue";
+	}
+};
+
+const getIcon = (row: AuditLog) => {
+	const c = getColorForAction(row.action);
+	let ico = null;
+	switch (row.objectType) {
+		case "user":
+			ico = <IconUser size={16} className={c} />;
+			break;
+	}
+
+	return ico;
+};
+
+interface Props {
+	row: AuditLog;
+}
+export function EventFormatter({ row }: Props) {
+	return (
+		<div className="flex-fill">
+			<div className="font-weight-medium">
+				{getIcon(row)} {getEventTitle(row)} &mdash; <span className="badge">{getEventValue(row)}</span>
+			</div>
+			<div className="text-secondary mt-1">{DateTimeFormat(row.createdOn)}</div>
+		</div>
+	);
+}
diff --git a/frontend/src/components/Table/Formatter/ValueWithDateFormatter.tsx b/frontend/src/components/Table/Formatter/ValueWithDateFormatter.tsx
@@ -1,5 +1,4 @@
-import { intlFormat, parseISO } from "date-fns";
-import { intl } from "src/locale";
+import { DateTimeFormat, intl } from "src/locale";
 
 interface Props {
 	value: string;
@@ -16,7 +15,7 @@ export function ValueWithDateFormatter({ value, createdOn, disabled }: Props) {
 				<div className={`text-secondary mt-1 ${disabled ? "text-red" : ""}`}>
 					{disabled
 						? intl.formatMessage({ id: "disabled" })
-						: intl.formatMessage({ id: "created-on" }, { date: intlFormat(parseISO(createdOn)) })}
+						: intl.formatMessage({ id: "created-on" }, { date: DateTimeFormat(createdOn) })}
 				</div>
 			) : null}
 		</div>
diff --git a/frontend/src/components/Table/Formatter/index.ts b/frontend/src/components/Table/Formatter/index.ts
@@ -1,6 +1,7 @@
 export * from "./CertificateFormatter";
 export * from "./DomainsFormatter";
 export * from "./EmailFormatter";
+export * from "./EventFormatter";
 export * from "./GravatarFormatter";
 export * from "./RolesFormatter";
 export * from "./StatusFormatter";
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
@@ -1,4 +1,6 @@
 export * from "./useAccessLists";
+export * from "./useAuditLog";
+export * from "./useAuditLogs";
 export * from "./useDeadHosts";
 export * from "./useHealth";
 export * from "./useHostReport";
diff --git a/frontend/src/hooks/useAuditLog.ts b/frontend/src/hooks/useAuditLog.ts
@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { type AuditLog, getAuditLog } from "src/api/backend";
+
+const fetchAuditLog = (id: number) => {
+	return getAuditLog(id, ["user"]);
+};
+
+const useAuditLog = (id: number, options = {}) => {
+	return useQuery<AuditLog, Error>({
+		queryKey: ["audit-log", id],
+		queryFn: () => fetchAuditLog(id),
+		staleTime: 5 * 60 * 1000, // 5 minutes
+		...options,
+	});
+};
+
+export { useAuditLog };
diff --git a/frontend/src/hooks/useAuditLogs.ts b/frontend/src/hooks/useAuditLogs.ts
@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { type AuditLog, type AuditLogExpansion, getAuditLogs } from "src/api/backend";
+
+const fetchAuditLogs = (expand?: AuditLogExpansion[]) => {
+	return getAuditLogs(expand);
+};
+
+const useAuditLogs = (expand?: AuditLogExpansion[], options = {}) => {
+	return useQuery<AuditLog[], Error>({
+		queryKey: ["audit-logs", { expand }],
+		queryFn: () => fetchAuditLogs(expand),
+		staleTime: 10 * 1000,
+		...options,
+	});
+};
+
+export { fetchAuditLogs, useAuditLogs };
diff --git a/frontend/src/locale/DateTimeFormat.ts b/frontend/src/locale/DateTimeFormat.ts
@@ -0,0 +1,15 @@
+import { intlFormat, parseISO } from "date-fns";
+
+const DateTimeFormat = (isoDate: string) =>
+	intlFormat(parseISO(isoDate), {
+		weekday: "long",
+		year: "numeric",
+		month: "numeric",
+		day: "numeric",
+		hour: "numeric",
+		minute: "numeric",
+		second: "numeric",
+		hour12: true,
+	});
+
+export { DateTimeFormat };
diff --git a/frontend/src/locale/index.ts b/frontend/src/locale/index.ts
@@ -1 +1,2 @@
+export * from "./DateTimeFormat";
 export * from "./IntlProvider";
diff --git a/frontend/src/locale/lang/en.json b/frontend/src/locale/lang/en.json
@@ -12,13 +12,16 @@
   "action.edit": "Edit",
   "action.enable": "Enable",
   "action.permissions": "Permissions",
+  "action.view-details": "View Details",
   "auditlog.title": "Audit Log",
   "cancel": "Cancel",
   "certificates.title": "SSL Certificates",
+  "close": "Close",
   "column.access": "Access",
   "column.authorization": "Authorization",
   "column.destination": "Destination",
   "column.email": "Email",
+  "column.event": "Event",
   "column.http-code": "Access",
   "column.incoming-port": "Incoming Port",
   "column.name": "Name",
@@ -41,6 +44,9 @@
   "empty-subtitle": "Why don't you create one?",
   "error.invalid-auth": "Invalid email or password",
   "error.passwords-must-match": "Passwords must match",
+  "event.created-user": "Created User",
+  "event.deleted-user": "Deleted User",
+  "event.updated-user": "Updated User",
   "footer.github-fork": "Fork me on Github",
   "hosts.title": "Hosts",
   "http-only": "HTTP Only",
diff --git a/frontend/src/locale/src/en.json b/frontend/src/locale/src/en.json
@@ -41,12 +41,18 @@
 	"auditlog.title": {
 		"defaultMessage": "Audit Log"
 	},
+	"action.view-details": {
+		"defaultMessage": "View Details"
+	},
 	"cancel": {
 		"defaultMessage": "Cancel"
 	},
 	"certificates.title": {
 		"defaultMessage": "SSL Certificates"
 	},
+	"close": {
+		"defaultMessage": "Close"
+	},
 	"created-on": {
 		"defaultMessage": "Created: {date}"
 	},
@@ -62,6 +68,9 @@
 	"column.email": {
 		"defaultMessage": "Email"
 	},
+	"column.event": {
+		"defaultMessage": "Event"
+	},
 	"column.http-code": {
 		"defaultMessage": "Access"
 	},
@@ -122,6 +131,15 @@
 	"error.invalid-auth": {
 		"defaultMessage": "Invalid email or password"
 	},
+	"event.created-user": {
+		"defaultMessage": "Created User"
+	},
+	"event.deleted-user": {
+		"defaultMessage": "Deleted User"
+	},
+	"event.updated-user": {
+		"defaultMessage": "Updated User"
+	},
 	"footer.github-fork": {
 		"defaultMessage": "Fork me on Github"
 	},
diff --git a/frontend/src/modals/EventDetailsModal.tsx b/frontend/src/modals/EventDetailsModal.tsx
diff --git a/frontend/src/modals/PermissionsModal.tsx b/frontend/src/modals/PermissionsModal.tsx
diff --git a/frontend/src/modals/UserModal.tsx b/frontend/src/modals/UserModal.tsx
diff --git a/frontend/src/modals/index.ts b/frontend/src/modals/index.ts
diff --git a/frontend/src/pages/AuditLog/Table.tsx b/frontend/src/pages/AuditLog/Table.tsx
diff --git a/frontend/src/pages/AuditLog/TableWrapper.tsx b/frontend/src/pages/AuditLog/TableWrapper.tsx
diff --git a/frontend/src/pages/AuditLog/index.tsx b/frontend/src/pages/AuditLog/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,8 @@ export interface AuditLog {`
`40`	`40`	`objectId: number;`
`41`	`41`	`action: string;`
`42`	`42`	`meta: Record<string, any>;`
	`43`	`+ // Expansions:`
	`44`	`+ user?: User;`
`43`	`45`	`}`
`44`	`46`
`45`	`47`	`export interface AccessList {`