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,
partition,
content,
valueFormat,
keyFormat,
headers,
},
}) => {
@ -72,7 +74,9 @@ const Message: React.FC<{ message: TopicMessage }> = ({
{isOpen && (
<MessageContent
messageKey={key}
messageKeyFormat={keyFormat}
messageContent={content}
messageContentFormat={valueFormat}
headers={headers}
timestamp={timestamp}
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 { Colors } from 'theme/theme';
export const MessageContentWrapper = styled.tr`
export const Wrapper = styled.tr`
background-color: ${Colors.neutral[5]};
& > td {
padding: 16px;
@ -14,7 +14,7 @@ export const MessageContentWrapper = styled.tr`
}
`;
export const StyledSection = styled.div`
export const Section = styled.div`
padding: 0 16px;
display: flex;
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 JSONViewer from 'components/common/JSONViewer/JSONViewer';
import { SecondaryTabs } from 'components/common/Tabs/SecondaryTabs.styled';
import { isObject } from 'lodash';
import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
import {
ContentBox,
StyledSection,
MessageContentWrapper,
Metadata,
MetadataLabel,
MetadataMeta,
MetadataValue,
MetadataWrapper,
} from './MessageContent.styled';
import * as S from './MessageContent.styled';
type Tab = 'key' | 'content' | 'headers';
export interface MessageContentProps {
messageKey?: string;
messageKeyFormat?: string;
messageContent?: string;
messageContentFormat?: string;
headers?: { [key: string]: string | undefined };
timestamp?: Date;
timestampType?: TopicMessageTimestampTypeEnum;
@ -28,7 +20,9 @@ export interface MessageContentProps {
const MessageContent: React.FC<MessageContentProps> = ({
messageKey,
messageKeyFormat,
messageContent,
messageContentFormat,
headers,
timestamp,
timestampType,
@ -58,25 +52,12 @@ const MessageContent: React.FC<MessageContentProps> = ({
};
const keySize = new TextEncoder().encode(messageKey).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 (
<MessageContentWrapper>
<S.Wrapper>
<td colSpan={10}>
<StyledSection>
<ContentBox>
<S.Section>
<S.ContentBox>
<SecondaryTabs>
<button
type="button"
@ -101,41 +82,39 @@ const MessageContent: React.FC<MessageContentProps> = ({
</button>
</SecondaryTabs>
<JSONViewer data={activeTabContent() || ''} />
</ContentBox>
<MetadataWrapper>
<Metadata>
<MetadataLabel>Timestamp</MetadataLabel>
</S.ContentBox>
<S.MetadataWrapper>
<S.Metadata>
<S.MetadataLabel>Timestamp</S.MetadataLabel>
<span>
<MetadataValue>{timestamp?.toLocaleString()}</MetadataValue>
<MetadataMeta>Timestamp type: {timestampType}</MetadataMeta>
<S.MetadataValue>{timestamp?.toLocaleString()}</S.MetadataValue>
<S.MetadataMeta>Timestamp type: {timestampType}</S.MetadataMeta>
</span>
</Metadata>
</S.Metadata>
<Metadata>
<MetadataLabel>Content</MetadataLabel>
<S.Metadata>
<S.MetadataLabel>Content</S.MetadataLabel>
<span>
<MetadataValue>
{isContentJson() ? 'JSON' : 'Text'}
</MetadataValue>
<MetadataMeta>
<S.MetadataValue>{messageContentFormat}</S.MetadataValue>
<S.MetadataMeta>
Size: <BytesFormatted value={contentSize} />
</MetadataMeta>
</S.MetadataMeta>
</span>
</Metadata>
</S.Metadata>
<Metadata>
<MetadataLabel>Key</MetadataLabel>
<S.Metadata>
<S.MetadataLabel>Key</S.MetadataLabel>
<span>
<MetadataValue>{isKeyJson() ? 'JSON' : 'Text'}</MetadataValue>
<MetadataMeta>
<S.MetadataValue>{messageKeyFormat}</S.MetadataValue>
<S.MetadataMeta>
Size: <BytesFormatted value={keySize} />
</MetadataMeta>
</S.MetadataMeta>
</span>
</Metadata>
</MetadataWrapper>
</StyledSection>
</S.Metadata>
</S.MetadataWrapper>
</S.Section>
</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>
<MessageContent
messageKey='"test-key"'
messageKeyFormat="JSON"
messageContent='{"data": "test"}'
messageContentFormat="AVRO"
headers={{ header: 'test' }}
timestamp={new Date(0)}
timestampType={TopicMessageTimestampTypeEnum.CREATE_TIME}
@ -32,6 +34,17 @@ describe('MessageContent screen', () => {
beforeEach(() => {
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', () => {
it('has a tab with is-active classname', () => {
const keyTab = screen.getAllByText('Key');