konnosDashboard
MessagesFormatters.tsx86 lines · main
1import { PropsWithChildren } from 'react'
2
3import { unixMicroToIsoTimestamp } from './Messages.utils'
4import CopyButton from '@/components/ui/CopyButton'
5
6export const RowLayout = ({ children }: PropsWithChildren<{}>) => (
7 <div className="flex h-full w-full items-center gap-4">{children}</div>
8)
9// renders a timestamp (either unix microsecond or iso timestamp)
10export const SelectionDetailedTimestampRow = ({
11 value,
12 hideCopy = false,
13}: {
14 value: string | number
15 hideCopy?: boolean
16}) => (
17 <SelectionDetailedRow
18 label="Timestamp"
19 value={unixMicroToIsoTimestamp(value)}
20 hideCopy={hideCopy}
21 />
22)
23export const SelectionDetailedRow = ({
24 label,
25 value,
26 valueRender,
27 hideCopy = false,
28}: {
29 label: string
30 value: string
31 valueRender?: React.ReactNode
32 hideCopy?: boolean
33}) => {
34 return (
35 <div className="grid grid-cols-12 group">
36 <span className="text-scale-900 text-sm col-span-4 whitespace-pre-wrap">{label}</span>
37 <span className="text-scale-1200 text-sm col-span-6 whitespace-pre-wrap break-all">
38 {valueRender ?? value}
39 </span>
40 {!hideCopy && (
41 <CopyButton
42 text={value}
43 className="group-hover:opacity-100 opacity-0 my-auto transition col-span-2 h-4 w-4 px-0 py-0"
44 type="text"
45 title="Copy to clipboard"
46 />
47 )}
48 </div>
49 )
50}
51
52/*
53 * JSON Syntax Highlighter
54 *
55 * for http response codes
56 */
57export function jsonSyntaxHighlight(input: Object) {
58 let json: string = JSON.stringify(input, null, 2)
59 json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
60
61 const newJson = json.replace(
62 /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
63
64 function (match) {
65 var cls = 'number text-tomato-900'
66 if (/^"/.test(match)) {
67 if (/:$/.test(match)) {
68 cls = 'key text-scale-1200'
69 } else {
70 cls = 'string text-brand-600'
71 }
72 } else if (/true|false/.test(match)) {
73 cls = 'boolean text-blue-900'
74 } else if (/null/.test(match)) {
75 cls = 'null text-amber-1100'
76 }
77 return '<span class="' + cls + '">' + match + '</span>'
78 }
79 )
80
81 const jsonWithLineWraps = newJson.split(`\n`).map((x) => {
82 return `<span class="line text-xs">${x}</span>`
83 })
84
85 return jsonWithLineWraps.join('\n')
86}