Audit log table and modal

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>

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>
+	);
+}

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>

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";