update
This commit is contained in:
@ -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, '&').replace(/</g, '<').replace(/>/g, '>');
|
// json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||||
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>
|
||||||
|
|||||||
@ -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, '&').replace(/</g, '<').replace(/>/g, '>');
|
// json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||||
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>
|
||||||
|
|||||||
Reference in New Issue
Block a user