110 lines
2.8 KiB
TypeScript
110 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { TopicMessage } from 'generated-sources';
|
|
import useDataSaver from 'lib/hooks/useDataSaver';
|
|
import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
|
|
import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
|
|
import styled from 'styled-components';
|
|
import { Dropdown, DropdownItem } from 'components/common/Dropdown';
|
|
import { formatTimestamp } from 'lib/dateTimeHelpers';
|
|
|
|
import MessageContent from './MessageContent/MessageContent';
|
|
import * as S from './MessageContent/MessageContent.styled';
|
|
|
|
const StyledDataCell = styled.td`
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: 350px;
|
|
min-width: 350px;
|
|
`;
|
|
|
|
const ClickableRow = styled.tr`
|
|
cursor: pointer;
|
|
`;
|
|
|
|
export interface Props {
|
|
message: TopicMessage;
|
|
}
|
|
|
|
const Message: React.FC<Props> = ({
|
|
message: {
|
|
timestamp,
|
|
timestampType,
|
|
offset,
|
|
key,
|
|
partition,
|
|
content,
|
|
valueFormat,
|
|
keyFormat,
|
|
headers,
|
|
},
|
|
}) => {
|
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
const savedMessageJson = {
|
|
Content: content,
|
|
Offset: offset,
|
|
Key: key,
|
|
Partition: partition,
|
|
Headers: headers,
|
|
Timestamp: timestamp,
|
|
};
|
|
const savedMessage = JSON.stringify(savedMessageJson, null, '\t');
|
|
const { copyToClipboard, saveFile } = useDataSaver(
|
|
'topic-message',
|
|
savedMessage || ''
|
|
);
|
|
|
|
const toggleIsOpen = () => setIsOpen(!isOpen);
|
|
|
|
const [vEllipsisOpen, setVEllipsisOpen] = React.useState(false);
|
|
|
|
return (
|
|
<>
|
|
<ClickableRow
|
|
onMouseEnter={() => setVEllipsisOpen(true)}
|
|
onMouseLeave={() => setVEllipsisOpen(false)}
|
|
onClick={toggleIsOpen}
|
|
>
|
|
<td>
|
|
<IconButtonWrapper aria-hidden>
|
|
<MessageToggleIcon isOpen={isOpen} />
|
|
</IconButtonWrapper>
|
|
</td>
|
|
<td>{offset}</td>
|
|
<td>{partition}</td>
|
|
<td>
|
|
<div>{formatTimestamp(timestamp)}</div>
|
|
</td>
|
|
<StyledDataCell title={key}>{key}</StyledDataCell>
|
|
<StyledDataCell>
|
|
<S.Metadata>
|
|
<S.MetadataValue>{content}</S.MetadataValue>
|
|
</S.Metadata>
|
|
</StyledDataCell>
|
|
<td style={{ width: '5%' }}>
|
|
{vEllipsisOpen && (
|
|
<Dropdown>
|
|
<DropdownItem onClick={copyToClipboard}>
|
|
Copy to clipboard
|
|
</DropdownItem>
|
|
<DropdownItem onClick={saveFile}>Save as a file</DropdownItem>
|
|
</Dropdown>
|
|
)}
|
|
</td>
|
|
</ClickableRow>
|
|
{isOpen && (
|
|
<MessageContent
|
|
messageKey={key}
|
|
messageKeyFormat={keyFormat}
|
|
messageContent={content}
|
|
messageContentFormat={valueFormat}
|
|
headers={headers}
|
|
timestamp={timestamp}
|
|
timestampType={timestampType}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Message;
|