RealtimeMessageColumnRenderer.tsx44 lines · main

1	import { AlertTriangle } from 'lucide-react'
2	import { Column } from 'react-data-grid'
3	import { cn, IconBroadcast, IconDatabaseChanges, IconPresence } from 'ui'
4
5	import type { LogData, PreviewLogData } from './Messages.types'
6	import { RowLayout } from './MessagesFormatters'
7	import { isErrorLog } from './MessagesTable'
8
9	const ICONS = {
10	PRESENCE: <IconPresence size="xlarge" />,
11	BROADCAST: <IconBroadcast size="xlarge" />,
12	POSTGRES: <IconDatabaseChanges size="xlarge" />,
13	SYSTEM: <AlertTriangle size="20" strokeWidth={1} />,
14	}
15
16	export const ColumnRenderer: Column<LogData, unknown>[] = [
17	{
18	name: 'timestamp-with-truncated-text',
19	key: 'main-column',
20	renderHeaderCell: () => null,
21	renderCell: (data: { row: PreviewLogData }) => {
22	const type = data.row.message as keyof typeof ICONS
23
24	return (
25	<RowLayout>
26	<div
27	className={cn(
28	'flex justify-center items-center min-w-[24px]',
29	isErrorLog(data.row) ? 'text-warning' : 'text-green-900'
30	)}
31	>
32	{ICONS[type]}
33	</div>
34	<span className={cn('font-mono', isErrorLog(data.row) ? 'text-warning!' : '')}>
35	{new Date(data.row.timestamp).toISOString()}
36	</span>
37	<span className={cn('truncate font-mono', isErrorLog(data.row) ? 'text-warning!' : '')}>
38	{JSON.stringify(data.row.metadata)}
39	</span>
40	</RowLayout>
41	)
42	},
43	},
44	]