Messages component refactored

kafka-ui-react-app/src/components/Topics/Details/Messages/MessageItem.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { format } from 'date-fns';
+import JSONTree from 'react-json-tree';
+import { TopicMessage } from 'generated-sources';
+
+interface MessageItemProp {
+  partition: TopicMessage['partition'];
+  offset: TopicMessage['offset'];
+  timestamp: TopicMessage['timestamp'];
+  content: Record<string, unknown>;
+}
+
+const MessageItem: React.FC<MessageItemProp> = ({
+  partition,
+  offset,
+  timestamp,
+  content,
+}) => {
+  const getFormattedDate = (date: Date) => {
+    if (!date) return null;
+    return format(date, 'yyyy-MM-dd HH:mm:ss');
+  };
+
+  return (
+    <tr key={`${timestamp}${Math.random()}`}>
+      <td style={{ width: 200 }}>{getFormattedDate(timestamp)}</td>
+      <td style={{ width: 150 }}>{offset}</td>
+      <td style={{ width: 100 }}>{partition}</td>
+      <td key={Math.random()} style={{ wordBreak: 'break-word' }}>
+        content ?
+        <JSONTree
+          data={typeof content !== 'object' ? JSON.parse(content) : content}
+          hideRoot
+          invertTheme={false}
+          theme={{
+            tree: ({ style }) => ({
+              style: {
+                ...style,
+                backgroundColor: undefined,
+                marginLeft: 0,
+                marginTop: 0,
+              },
+            }),
+            value: ({ style }) => ({
+              style: { ...style, marginLeft: 0 },
+            }),
+            base0D: '#3273dc',
+            base0B: '#363636',
+          }}
+        />
+        : content
+      </td>
+    </tr>
+  );
+};
+
+export default MessageItem;

kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx

@@ -8,9 +8,6 @@ import { TopicMessage, Partition, SeekType } from 'generated-sources';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
-import CustomParamButton, {
-  CustomParamButtonType,
-} from 'components/Topics/shared/Form/CustomParams/CustomParamButton';
 
 import MultiSelect from 'react-multi-select-component';
 
@@ -199,26 +196,6 @@ const Messages: React.FC<Props> = ({
     );
   };
 
-  const getTopicMessagesTable = () => {
-    return messages.length > 0 ? (
-      <div>
-        <MessagesTable messages={messages} />
-        <div className="columns">
-          <div className="column is-full">
-            <CustomParamButton
-              className="is-link is-pulled-right"
-              type={CustomParamButtonType.chevronRight}
-              onClick={onNext}
-              btnText="Next"
-            />
-          </div>
-        </div>
-      </div>
-    ) : (
-      <div>No messages at selected topic</div>
-    );
-  };
-
   if (!isFetched) {
     return <PageLoader isFullHeight={false} />;
   }
@@ -303,7 +280,7 @@ const Messages: React.FC<Props> = ({
           />
         </div>
       </div>
-      {getTopicMessagesTable()}
+      <MessagesTable messages={messages} onNext={onNext} />
     </div>
   );
 };

kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesTable.tsx

@@ -1,76 +1,55 @@
 import React from 'react';
-import { format } from 'date-fns';
-import JSONTree from 'react-json-tree';
-import { TopicMessage } from '../../../../generated-sources';
+import { TopicMessage } from 'generated-sources';
+import CustomParamButton, {
+  CustomParamButtonType,
+} from '../../shared/Form/CustomParams/CustomParamButton';
+import MessageItem from './MessageItem';
 
-interface MessageProp {
+interface MessagesTableProp {
   messages: TopicMessage[];
+  onNext(event: React.MouseEvent<HTMLButtonElement>): void;
 }
 
-const MessagesTable = ({ messages }: MessageProp) => {
-  const getFormattedDate = (date: Date) => {
-    if (!date) return null;
-    return format(date, 'yyyy-MM-dd HH:mm:ss');
-  };
-
-  const getMessageContentBody = (content: Record<string, unknown>) => {
-    try {
-      const contentObj =
-        typeof content !== 'object' ? JSON.parse(content) : content;
-      return (
-        <JSONTree
-          data={contentObj}
-          hideRoot
-          invertTheme={false}
-          theme={{
-            tree: ({ style }) => ({
-              style: {
-                ...style,
-                backgroundColor: undefined,
-                marginLeft: 0,
-                marginTop: 0,
-              },
-            }),
-            value: ({ style }) => ({
-              style: { ...style, marginLeft: 0 },
-            }),
-            base0D: '#3273dc',
-            base0B: '#363636',
-          }}
-        />
-      );
-    } catch (e) {
-      return content;
-    }
-  };
+const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
+  if (!messages.length) {
+    return <div>No messages at selected topic</div>;
+  }
 
   return (
-    <table className="table is-striped is-fullwidth">
-      <thead>
-        <tr>
-          <th>Timestamp</th>
-          <th>Offset</th>
-          <th>Partition</th>
-          <th>Content</th>
-        </tr>
-      </thead>
-      <tbody>
-        {messages.map((message) => (
-          <tr key={`${message.timestamp}${Math.random()}`}>
-            <td style={{ width: 200 }}>
-              {getFormattedDate(message.timestamp)}
-            </td>
-            <td style={{ width: 150 }}>{message.offset}</td>
-            <td style={{ width: 100 }}>{message.partition}</td>
-            <td key={Math.random()} style={{ wordBreak: 'break-word' }}>
-              {getMessageContentBody(
-                message.content as Record<string, unknown>
-              )}
-            </td>
+    <div>
+      <table className="table is-striped is-fullwidth">
+        <thead>
+          <tr>
+            <th>Timestamp</th>
+            <th>Offset</th>
+            <th>Partition</th>
+            <th>Content</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {messages.map(
+            ({ partition, offset, timestamp, content }: TopicMessage) => (
+              <MessageItem
+                partition={partition}
+                offset={offset}
+                timestamp={timestamp}
+                content={content as Record<string, unknown>}
+              />
+            )
+          )}
+        </tbody>
+      </table>
+      <div className="columns">
+        <div className="column is-full">
+          <CustomParamButton
+            className="is-link is-pulled-right"
+            type={CustomParamButtonType.chevronRight}
+            onClick={onNext}
+            btnText="Next"
+          />
+        </div>
+      </div>
+    </div>
   );
 };