53 lines
No EOL
1.7 KiB
TypeScript
53 lines
No EOL
1.7 KiB
TypeScript
import React from 'react';
|
|
import { JSONTree } from 'UI';
|
|
import { checkForRecent } from 'App/date';
|
|
|
|
interface Props {
|
|
audit: any;
|
|
}
|
|
function AuditDetailModal(props: Props) {
|
|
const { audit } = props;
|
|
// const jsonResponse = typeof audit.payload === 'string' ? JSON.parse(audit.payload) : audit.payload;
|
|
// console.log('jsonResponse', jsonResponse)
|
|
|
|
return (
|
|
<div className="bg-white h-screen overflow-y-auto">
|
|
<h1 className="text-2xl p-4">Audit Details</h1>
|
|
<div className="p-4">
|
|
<h5 className="mb-2">{ 'URL'}</h5>
|
|
<div className="color-gray-darkest p-2 bg-gray-lightest rounded">{ audit.endPoint }</div>
|
|
|
|
<div className="grid grid-cols-2 my-6">
|
|
<div className="">
|
|
<div className="font-medium mb-2">Username</div>
|
|
<div>{audit.username}</div>
|
|
</div>
|
|
<div className="">
|
|
<div className="font-medium mb-2">Created At</div>
|
|
<div>{audit.createdAt && checkForRecent(audit.createdAt, 'LLL dd, yyyy, hh:mm a')}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 my-6">
|
|
<div className="">
|
|
<div className="font-medium mb-2">Action</div>
|
|
<div>{audit.action}</div>
|
|
</div>
|
|
<div className="">
|
|
<div className="font-medium mb-2">Method</div>
|
|
<div>{audit.method}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{ audit.payload && (
|
|
<div className="my-6">
|
|
<div className="font-medium mb-3">Payload</div>
|
|
<JSONTree src={ audit.payload } collapsed={ false } enableClipboard />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AuditDetailModal; |