From 7801c292af24049f7d53e32815eb06c707e86dfb Mon Sep 17 00:00:00 2001 From: Alexander Krivonosov <31561808+GneyHabub@users.noreply.github.com> Date: Tue, 18 May 2021 10:05:25 +0300 Subject: [PATCH] Message truncation (#457) * Implement message truncation --- kafka-ui-react-app/package.json | 1 + .../Topic/Details/Messages/MessageContent.tsx | 48 ++++++++++ .../Topic/Details/Messages/MessageItem.tsx | 11 +-- .../Messages/__test__/MessageContent.spec.tsx | 21 +++++ .../Messages/__test__/MessageItem.spec.tsx | 4 +- .../Messages/__test__/Messages.spec.tsx | 4 +- .../MessageContent.spec.tsx.snap | 90 +++++++++++++++++++ .../__snapshots__/MessageItem.spec.tsx.snap | 15 +--- .../Details/Messages/__test__/fixtures.ts | 11 +++ .../Topics/Topic/Details/Messages/theme.ts | 22 +++++ .../src/theme/bulma_overrides.scss | 11 +++ 11 files changed, 214 insertions(+), 24 deletions(-) create mode 100644 kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent.tsx create mode 100644 kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageContent.spec.tsx create mode 100644 kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageContent.spec.tsx.snap create mode 100644 kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/theme.ts diff --git a/kafka-ui-react-app/package.json b/kafka-ui-react-app/package.json index e66c65b02b..d3d4256558 100644 --- a/kafka-ui-react-app/package.json +++ b/kafka-ui-react-app/package.json @@ -22,6 +22,7 @@ "react-datepicker": "^3.7.0", "react-dom": "^17.0.1", "react-hook-form": "^6.15.5", + "react-json-tree": "^0.15.0", "react-multi-select-component": "^4.0.0", "react-redux": "^7.2.2", "react-router": "^5.2.0", diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent.tsx new file mode 100644 index 0000000000..8034c957d6 --- /dev/null +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import JSONTree from 'react-json-tree'; + +import theme from './theme'; + +interface MessageContentProps { + message: string; +} + +const MessageContent: React.FC = ({ message }) => { + const [isFolded, setIsFolded] = React.useState(message.length > 250); + let fullMessage: Record | string; + const cutMessage = `${message.slice(0, 250)}...`; + try { + fullMessage = JSON.parse(message); + } catch (e) { + fullMessage = message; + } + + return ( +
+ {isFolded ? ( +

{cutMessage}

+ ) : ( + true} + hideRoot + /> + )} + {isFolded && ( + + )} +
+ ); +}; + +export default MessageContent; diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageItem.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageItem.tsx index f6dc39a292..ba92a70f84 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageItem.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageItem.tsx @@ -3,9 +3,10 @@ import { format } from 'date-fns'; import { TopicMessage } from 'generated-sources'; import Dropdown from 'components/common/Dropdown/Dropdown'; import DropdownItem from 'components/common/Dropdown/DropdownItem'; -import JSONEditor from 'components/common/JSONEditor/JSONEditor'; import useDataSaver from 'lib/hooks/useDataSaver'; +import MessageContent from './MessageContent'; + export interface MessageItemProp { partition: TopicMessage['partition']; offset: TopicMessage['offset']; @@ -29,13 +30,7 @@ const MessageItem: React.FC = ({ {offset} {partition} - + { + const component = shallow(); + describe('when it is folded', () => { + it('matches the snapshot', () => { + expect(component).toMatchSnapshot(); + }); + }); + + describe('when it is unfolded', () => { + it('matches the snapshot', () => { + component.find('button').simulate('click'); + expect(component).toMatchSnapshot(); + }); + }); +}); diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx index 890b7eeeb9..25648dab07 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx @@ -10,12 +10,12 @@ jest.mock('date-fns', () => ({ describe('MessageItem', () => { describe('when content is defined', () => { - it('renders table row with JSONEditor', () => { + it('renders table row with MessageContent', () => { const wrapper = shallow(); expect(wrapper.find('tr').length).toEqual(1); expect(wrapper.find('td').length).toEqual(5); - expect(wrapper.find('JSONEditor').length).toEqual(1); + expect(wrapper.find('MessageContent').length).toEqual(1); }); it('matches snapshot', () => { diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx index 3ca92a03b9..117e1cc8b8 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx @@ -65,8 +65,8 @@ describe('Messages', () => { it('renders table', () => { expect(messagesWrapper.exists('.table.is-fullwidth')).toBeTruthy(); }); - it('renders JSONEditor', () => { - expect(messagesWrapper.find('JSONEditor').length).toEqual(1); + it('renders MessageContent', () => { + expect(messagesWrapper.find('MessageContent').length).toEqual(1); }); it('parses message content correctly', () => { const messages = [ diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageContent.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageContent.spec.tsx.snap new file mode 100644 index 0000000000..ccb7a78ee4 --- /dev/null +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageContent.spec.tsx.snap @@ -0,0 +1,90 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MessageContent when it is folded matches the snapshot 1`] = ` +
+

+ { + "_id": "609fab8aed527f514f4e648d", + "name": "in nostrud", + "desc": "Dolore nostrud commodo magna velit ut magna voluptate sint aute. Excepteur aute culpa culpa dolor ipsum. Tempor est ut officia tempor laborum consectetur. +Amet officia eu veni... +

+ +
+`; + +exports[`MessageContent when it is unfolded matches the snapshot 1`] = ` +
+ +
+`; diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageItem.spec.tsx.snap index 339f189409..2e81720530 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageItem.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageItem.spec.tsx.snap @@ -36,12 +36,8 @@ exports[`MessageItem when content is defined matches snapshot 1`] = ` } } > - - +