This commit is contained in:
wayanrivan
2025-05-20 10:14:07 +07:00
parent 3bbe78b38a
commit 3e731b60b5
2 changed files with 139 additions and 183 deletions

View File

@ -107,34 +107,34 @@ const DetailApprovalTransaction = () => {
return null; return null;
}; };
const [formattedJson, setFormattedJson] = useState(''); // const [formattedJson, setFormattedJson] = useState('');
const [highlightedJson, setHighlightedJson] = useState(''); // const [highlightedJson, setHighlightedJson] = useState('');
useEffect(() => { // useEffect(() => {
const obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] }; // const obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] };
const str = JSON.stringify(obj, undefined, 4); // const str = JSON.stringify(obj, undefined, 4);
setFormattedJson(str); // setFormattedJson(str);
setHighlightedJson(syntaxHighlight(str)); // setHighlightedJson(syntaxHighlight(str));
}, []); // }, []);
function syntaxHighlight(json: any) { // function syntaxHighlight(json: any) {
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); // json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])"(\s:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match: any) { // return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])"(\s:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match: any) {
let cls = 'number'; // let cls = 'number';
if (/^"/.test(match)) { // if (/^"/.test(match)) {
if (/:$/.test(match)) { // if (/:$/.test(match)) {
cls = 'key'; // cls = 'key';
} else { // } else {
cls = 'string'; // cls = 'string';
} // }
} else if (/true|false/.test(match)) { // } else if (/true|false/.test(match)) {
cls = 'boolean'; // cls = 'boolean';
} else if (/null/.test(match)) { // } else if (/null/.test(match)) {
cls = 'null'; // cls = 'null';
} // }
return '<span className="' + cls + '">' + match + '</span>'; // return '<span className="' + cls + '">' + match + '</span>';
}); // });
} // }
return ( return (
@ -719,26 +719,15 @@ const DetailApprovalTransaction = () => {
}) })
: ''}</td> : ''}</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.request_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.request_body ?? '') === 'string'
? (log.request_body ?? '')
: JSON.stringify(log.request_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.response_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint || ''}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint || ''}</td>
@ -867,26 +856,15 @@ const DetailApprovalTransaction = () => {
}) })
: ''}</td> : ''}</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.request_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.request_body ?? '') === 'string'
? (log.request_body ?? '')
: JSON.stringify(log.request_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.response_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td>

View File

@ -126,34 +126,34 @@ const DetailTransaction = () => {
return null; return null;
}; };
const [formattedJson, setFormattedJson] = useState(''); // const [formattedJson, setFormattedJson] = useState('');
const [highlightedJson, setHighlightedJson] = useState(''); // const [highlightedJson, setHighlightedJson] = useState('');
useEffect(() => { // useEffect(() => {
const obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] }; // const obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] };
const str = JSON.stringify(obj, undefined, 4); // const str = JSON.stringify(obj, undefined, 4);
setFormattedJson(str); // setFormattedJson(str);
setHighlightedJson(syntaxHighlight(str)); // setHighlightedJson(syntaxHighlight(str));
}, []); // }, []);
function syntaxHighlight(json: any) { // function syntaxHighlight(json: any) {
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); // json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])"(\s:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match: any) { // return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])"(\s:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match: any) {
let cls = 'number'; // let cls = 'number';
if (/^"/.test(match)) { // if (/^"/.test(match)) {
if (/:$/.test(match)) { // if (/:$/.test(match)) {
cls = 'key'; // cls = 'key';
} else { // } else {
cls = 'string'; // cls = 'string';
} // }
} else if (/true|false/.test(match)) { // } else if (/true|false/.test(match)) {
cls = 'boolean'; // cls = 'boolean';
} else if (/null/.test(match)) { // } else if (/null/.test(match)) {
cls = 'null'; // cls = 'null';
} // }
return '<span className="' + cls + '">' + match + '</span>'; // return '<span className="' + cls + '">' + match + '</span>';
}); // });
} // }
return ( return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}> <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@ -780,26 +780,15 @@ const DetailTransaction = () => {
}) })
: ''}</td> : ''}</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.request_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.request_body ?? '') === 'string'
? (log.request_body ?? '')
: JSON.stringify(log.request_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.response_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint || ''}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint || ''}</td>
@ -928,26 +917,15 @@ const DetailTransaction = () => {
}) })
: ''}</td> : ''}</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.request_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.request_body ?? '') === 'string'
? (log.request_body ?? '')
: JSON.stringify(log.request_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.response_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td>