f0b1e9c7d9
Abstract dynamic button to a separate component; Move buttons to the JSONViewer; Move data-saving to a hook;
33 lines
874 B
TypeScript
33 lines
874 B
TypeScript
import React from 'react';
|
|
import { format } from 'date-fns';
|
|
import { TopicMessage } from 'generated-sources';
|
|
import JSONViewer from 'components/common/JSONViewer/JSONViewer';
|
|
|
|
export interface MessageItemProp {
|
|
partition: TopicMessage['partition'];
|
|
offset: TopicMessage['offset'];
|
|
timestamp: TopicMessage['timestamp'];
|
|
content?: TopicMessage['content'];
|
|
}
|
|
|
|
const MessageItem: React.FC<MessageItemProp> = ({
|
|
partition,
|
|
offset,
|
|
timestamp,
|
|
content,
|
|
}) => (
|
|
<tr>
|
|
<td style={{ width: 200 }}>{format(timestamp, 'yyyy-MM-dd HH:mm:ss')}</td>
|
|
<td style={{ width: 150 }}>{offset}</td>
|
|
<td style={{ width: 100 }}>{partition}</td>
|
|
<td style={{ wordBreak: 'break-word' }}>
|
|
{content && (
|
|
<div>
|
|
<JSONViewer data={content as { [key: string]: string }} />
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
|
|
export default MessageItem;
|