10a27ba60e
* ISSUE-169 Sort topics (#172) * Messages Table component created * Messages component refactored * MessageItem component fixed * MessageItem component updated * MessageItem component refactored Co-authored-by: German Osin <german.osin@gmail.com> Co-authored-by: Oleg Shuralev <workshur@gmail.com>
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { format } from 'date-fns';
|
|
import JSONTree from 'react-json-tree';
|
|
import { TopicMessage } from 'generated-sources';
|
|
|
|
interface MessageItemProp {
|
|
partition: TopicMessage['partition'];
|
|
offset: TopicMessage['offset'];
|
|
timestamp: TopicMessage['timestamp'];
|
|
content: TopicMessage['content'];
|
|
}
|
|
|
|
const MessageItem: React.FC<MessageItemProp> = ({
|
|
partition,
|
|
offset,
|
|
timestamp,
|
|
content,
|
|
}) => (
|
|
<tr key="{timestamp}">
|
|
<td style={{ width: 200 }}>
|
|
{timestamp ? format(timestamp, 'yyyy-MM-dd HH:mm:ss') : null}
|
|
</td>
|
|
<td style={{ width: 150 }}>{offset}</td>
|
|
<td style={{ width: 100 }}>{partition}</td>
|
|
<td key="{content}" style={{ wordBreak: 'break-word' }}>
|
|
{content && (
|
|
<JSONTree
|
|
data={content}
|
|
hideRoot
|
|
invertTheme={false}
|
|
theme={{
|
|
tree: ({ style }) => ({
|
|
style: {
|
|
...style,
|
|
backgroundColor: undefined,
|
|
marginLeft: 0,
|
|
marginTop: 0,
|
|
},
|
|
}),
|
|
value: ({ style }) => ({
|
|
style: { ...style, marginLeft: 0 },
|
|
}),
|
|
base0D: '#3273dc',
|
|
base0B: '#363636',
|
|
}}
|
|
/>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
|
|
export default MessageItem;
|