40 lines
1.7 KiB
TypeScript
40 lines
1.7 KiB
TypeScript
import { Colors } from "~/application/enums/shared/Colors";
|
|
import MonacoEditor from "~/components/editors/MonacoEditor";
|
|
import SimpleBadge from "~/components/ui/badges/SimpleBadge";
|
|
import InputText from "~/components/ui/input/InputText";
|
|
import { useLocaleFormatters } from "~/locale/format";
|
|
import { EventWithDetails } from "../db/events.db.server";
|
|
import { redactDiagnosticJsonString } from "~/utils/redaction";
|
|
import EventUtils from "../utils/EventUtils";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface Props {
|
|
item: EventWithDetails;
|
|
}
|
|
export default function EventDetails({ item }: Props) {
|
|
const { t } = useTranslation();
|
|
const formatters = useLocaleFormatters();
|
|
const formattedData = () => {
|
|
return redactDiagnosticJsonString(item.data);
|
|
};
|
|
return (
|
|
<div className="space-y-3 text-sm">
|
|
<div className="border-border flex justify-between border-b pb-3">
|
|
<h3>
|
|
<SimpleBadge className="text-lg" title={EventUtils.parseName(item.name, t)} color={Colors.VIOLET} />
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<InputText name="createdAt" title={t("shared.createdAt")} defaultValue={formatters.dateTime(item.createdAt)} readOnly={true} />
|
|
<InputText name="account" title={t("models.tenant.object")} defaultValue={item.tenant?.name ?? t("shared.notSet")} readOnly={true} />
|
|
<InputText name="user" title={t("models.user.object")} defaultValue={item.user?.email || t("shared.notSet")} readOnly={true} />
|
|
</div>
|
|
|
|
<div className="h-96 overflow-auto p-2">
|
|
<MonacoEditor value={formattedData()} onChange={() => {}} theme="vs-dark" language="json" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|