0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[Fixes #1391] Incorrect topic message content type (avro -> json) (#1422)

Browse source 
* Updates MessageContent to use keyFormat and valueFormat data from API

* Changes imports to * from S

* Adds tests verify keyFormat and contentFormat renders correctly

Co-authored-by: Damir Abdulganiev <dabdulganiev@provectus.com>
This commit is contained in:
Damir Abdulganiev 2022-01-19 17:45:50 +03:00 • committed by GitHub
parent 7789523613
commit 2d5a8c024a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Message.tsx
View file

@ -27,6 +27,8 @@ const Message: React.FC<{ message: TopicMessage }> = ({
key, key,
partition, partition,
content, content,
valueFormat,
keyFormat,
headers, headers,
}, },
}) => { }) => {
@ -72,7 +74,9 @@ const Message: React.FC<{ message: TopicMessage }> = ({
{isOpen && ( {isOpen && (
<MessageContent <MessageContent
messageKey={key} messageKey={key}
messageKeyFormat={keyFormat}
messageContent={content} messageContent={content}
messageContentFormat={valueFormat}
headers={headers} headers={headers}
timestamp={timestamp} timestamp={timestamp}
timestampType={timestampType} timestampType={timestampType}

4
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts
View file

@ -1,7 +1,7 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { Colors } from 'theme/theme'; import { Colors } from 'theme/theme';
export const MessageContentWrapper = styled.tr` export const Wrapper = styled.tr`
background-color: ${Colors.neutral[5]}; background-color: ${Colors.neutral[5]};
& > td { & > td {
padding: 16px; padding: 16px;
@ -14,7 +14,7 @@ export const MessageContentWrapper = styled.tr`
} }
`; `;
export const StyledSection = styled.div` export const Section = styled.div`
padding: 0 16px; padding: 0 16px;
display: flex; display: flex;
gap: 1px; gap: 1px;

83
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.tsx
View file

@ -2,25 +2,17 @@ import { TopicMessageTimestampTypeEnum } from 'generated-sources';
import React from 'react'; import React from 'react';
import JSONViewer from 'components/common/JSONViewer/JSONViewer'; import JSONViewer from 'components/common/JSONViewer/JSONViewer';
import { SecondaryTabs } from 'components/common/Tabs/SecondaryTabs.styled'; import { SecondaryTabs } from 'components/common/Tabs/SecondaryTabs.styled';
import { isObject } from 'lodash';
import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted'; import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
import { import * as S from './MessageContent.styled';
ContentBox,
StyledSection,
MessageContentWrapper,
Metadata,
MetadataLabel,
MetadataMeta,
MetadataValue,
MetadataWrapper,
} from './MessageContent.styled';
type Tab = 'key' | 'content' | 'headers'; type Tab = 'key' | 'content' | 'headers';
export interface MessageContentProps { export interface MessageContentProps {
messageKey?: string; messageKey?: string;
messageKeyFormat?: string;
messageContent?: string; messageContent?: string;
messageContentFormat?: string;
headers?: { [key: string]: string | undefined }; headers?: { [key: string]: string | undefined };
timestamp?: Date; timestamp?: Date;
timestampType?: TopicMessageTimestampTypeEnum; timestampType?: TopicMessageTimestampTypeEnum;
@ -28,7 +20,9 @@ export interface MessageContentProps {
const MessageContent: React.FC<MessageContentProps> = ({ const MessageContent: React.FC<MessageContentProps> = ({
messageKey, messageKey,
messageKeyFormat,
messageContent, messageContent,
messageContentFormat,
headers, headers,
timestamp, timestamp,
timestampType, timestampType,
@ -58,25 +52,12 @@ const MessageContent: React.FC<MessageContentProps> = ({
}; };
const keySize = new TextEncoder().encode(messageKey).length; const keySize = new TextEncoder().encode(messageKey).length;
const contentSize = new TextEncoder().encode(messageContent).length; const contentSize = new TextEncoder().encode(messageContent).length;
const isContentJson = () => {
try {
return isObject(messageContent && JSON.parse(messageContent));
} catch {
return false;
}
};
const isKeyJson = () => {
try {
return isObject(messageKey && JSON.parse(messageKey));
} catch {
return false;
}
};
return ( return (
<MessageContentWrapper> <S.Wrapper>
<td colSpan={10}> <td colSpan={10}>
<StyledSection> <S.Section>
<ContentBox> <S.ContentBox>
<SecondaryTabs> <SecondaryTabs>
<button <button
type="button" type="button"
@ -101,41 +82,39 @@ const MessageContent: React.FC<MessageContentProps> = ({
</button> </button>
</SecondaryTabs> </SecondaryTabs>
<JSONViewer data={activeTabContent() || ''} /> <JSONViewer data={activeTabContent() || ''} />
</ContentBox> </S.ContentBox>
<MetadataWrapper> <S.MetadataWrapper>
<Metadata> <S.Metadata>
<MetadataLabel>Timestamp</MetadataLabel> <S.MetadataLabel>Timestamp</S.MetadataLabel>
<span> <span>
<MetadataValue>{timestamp?.toLocaleString()}</MetadataValue> <S.MetadataValue>{timestamp?.toLocaleString()}</S.MetadataValue>
<MetadataMeta>Timestamp type: {timestampType}</MetadataMeta> <S.MetadataMeta>Timestamp type: {timestampType}</S.MetadataMeta>
</span> </span>
</Metadata> </S.Metadata>
<Metadata> <S.Metadata>
<MetadataLabel>Content</MetadataLabel> <S.MetadataLabel>Content</S.MetadataLabel>
<span> <span>
<MetadataValue> <S.MetadataValue>{messageContentFormat}</S.MetadataValue>
{isContentJson() ? 'JSON' : 'Text'} <S.MetadataMeta>
</MetadataValue>
<MetadataMeta>
Size: <BytesFormatted value={contentSize} /> Size: <BytesFormatted value={contentSize} />
</MetadataMeta> </S.MetadataMeta>
</span> </span>
</Metadata> </S.Metadata>
<Metadata> <S.Metadata>
<MetadataLabel>Key</MetadataLabel> <S.MetadataLabel>Key</S.MetadataLabel>
<span> <span>
<MetadataValue>{isKeyJson() ? 'JSON' : 'Text'}</MetadataValue> <S.MetadataValue>{messageKeyFormat}</S.MetadataValue>
<MetadataMeta> <S.MetadataMeta>
Size: <BytesFormatted value={keySize} /> Size: <BytesFormatted value={keySize} />
</MetadataMeta> </S.MetadataMeta>
</span> </span>
</Metadata> </S.Metadata>
</MetadataWrapper> </S.MetadataWrapper>
</StyledSection> </S.Section>
</td> </td>
</MessageContentWrapper> </S.Wrapper>
); );
}; };

13
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx
View file

@ -15,7 +15,9 @@ const setupWrapper = (props?: Partial<MessageContentProps>) => {
<tbody> <tbody>
<MessageContent <MessageContent
messageKey='"test-key"' messageKey='"test-key"'
messageKeyFormat="JSON"
messageContent='{"data": "test"}' messageContent='{"data": "test"}'
messageContentFormat="AVRO"
headers={{ header: 'test' }} headers={{ header: 'test' }}
timestamp={new Date(0)} timestamp={new Date(0)}
timestampType={TopicMessageTimestampTypeEnum.CREATE_TIME} timestampType={TopicMessageTimestampTypeEnum.CREATE_TIME}
@ -32,6 +34,17 @@ describe('MessageContent screen', () => {
beforeEach(() => { beforeEach(() => {
render(setupWrapper()); render(setupWrapper());
}); });
describe('renders', () => {
it('key format in document', () => {
expect(screen.getByText('JSON')).toBeInTheDocument();
});
it('content format in document', () => {
expect(screen.getByText('AVRO')).toBeInTheDocument();
});
});
describe('when switched to display the key', () => { describe('when switched to display the key', () => {
it('has a tab with is-active classname', () => { it('has a tab with is-active classname', () => {
const keyTab = screen.getAllByText('Key'); const keyTab = screen.getAllByText('Key');