Fix topic messages (#664)

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import JSONTree from 'react-json-tree';
+
+import theme from './theme';
+
+interface FullMessageProps {
+  message: string;
+}
+
+const FullMessage: React.FC<FullMessageProps> = ({ message }) => {
+  try {
+    return (
+      <JSONTree
+        data={JSON.parse(message)}
+        theme={theme}
+        shouldExpandNode={() => true}
+        hideRoot
+      />
+    );
+  } catch (e) {
+    return <p>{JSON.stringify(message)}</p>;
+  }
+};
+
+export default FullMessage;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import JSONTree from 'react-json-tree';
 
-import theme from './theme';
+import FullMessage from './FullMessage';
 
 interface MessageContentProps {
   message: string;
@@ -9,25 +8,15 @@ interface MessageContentProps {
 
 const MessageContent: React.FC<MessageContentProps> = ({ message }) => {
   const [isFolded, setIsFolded] = React.useState(message.length > 250);
-  let fullMessage: Record<string, string> | string;
-  const cutMessage = `${message.slice(0, 250)}...`;
-  try {
-    fullMessage = JSON.parse(message);
-  } catch (e) {
-    fullMessage = message;
-  }
 
   return (
-    <div className="is-flex is-flex-direction-column is-align-items-center">
+    <div className="is-flex is-flex-direction-column">
       {isFolded ? (
-        <p className="has-content-overflow-ellipsis">{cutMessage}</p>
+        <p className="has-content-overflow-ellipsis">
+          {`${message.slice(0, 250)}...`}
+        </p>
       ) : (
-        <JSONTree
-          data={fullMessage}
-          theme={theme}
-          shouldExpandNode={() => true}
-          hideRoot
-        />
+        <FullMessage message={message} />
       )}
       {isFolded && (
         <button

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

@@ -33,7 +33,7 @@ const MessageItem: React.FC<MessageItemProp> = ({
       <td style={{ width: 150 }}>{offset}</td>
       <td style={{ width: 100 }}>{partition}</td>
       <td style={{ wordBreak: 'break-word' }}>
-        <MessageContent message={JSON.stringify(content, null, '\t')} />
+        {content && <MessageContent message={content} />}
       </td>
       <td className="has-text-right">
         <Dropdown

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

@@ -228,8 +228,8 @@ const Messages: React.FC<Props> = ({
 
   return (
     <div>
-      <div className="columns">
-        <div className="column is-one-fifth">
+      <div className="columns is-align-items-flex-end">
+        <div className="column is-3">
           <label className="label">Partitions</label>
           <MultiSelect
             options={partitions.map((p) => ({
@@ -242,7 +242,7 @@ const Messages: React.FC<Props> = ({
             labelledBy="Select partitions"
           />
         </div>
-        <div className="column is-one-fifth">
+        <div className="column is-2">
           <label className="label">Seek Type</label>
           <div className="select is-block">
             <select
@@ -256,7 +256,7 @@ const Messages: React.FC<Props> = ({
             </select>
           </div>
         </div>
-        <div className="column is-one-fifth">
+        <div className="column is-2">
           {selectedSeekType === SeekType.OFFSET ? (
             <>
               <label className="label">Offset</label>
@@ -284,7 +284,7 @@ const Messages: React.FC<Props> = ({
             </>
           )}
         </div>
-        <div className="column is-two-fifths">
+        <div className="column is-3">
           <label className="label">Search</label>
           <input
             id="searchText"
@@ -296,6 +296,13 @@ const Messages: React.FC<Props> = ({
             onChange={handleQueryChange}
           />
         </div>
+        <div className="column is-2">
+          <input
+            type="submit"
+            className="button is-primary is-fullwidth"
+            onClick={handleFiltersSubmit}
+          />
+        </div>
       </div>
       <div className="columns">
         <div className="column is-half">
@@ -311,13 +318,6 @@ const Messages: React.FC<Props> = ({
             <label htmlFor="switchRoundedDefault">Newest first</label>
           </div>
         </div>
-        <div className="column is-half" style={{ textAlign: 'right' }}>
-          <input
-            type="submit"
-            className="button is-primary"
-            onClick={handleFiltersSubmit}
-          />
-        </div>
       </div>
       <MessagesTable messages={messages} onNext={onNext} />
     </div>

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

@@ -16,7 +16,7 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
 
   return (
     <>
-      <table className="table is-fullwidth">
+      <table className="table is-fullwidth is-narrow">
         <thead>
           <tr>
             <th>Timestamp</th>

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageContent.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`MessageContent when it is folded matches the snapshot 1`] = `
 <div
-  className="is-flex is-flex-direction-column is-align-items-center"
+  className="is-flex is-flex-direction-column"
 >
   <p
     className="has-content-overflow-ellipsis"
@@ -32,11 +32,10 @@ Amet officia eu veni...
 
 exports[`MessageContent when it is unfolded matches the snapshot 1`] = `
 <div
-  className="is-flex is-flex-direction-column is-align-items-center"
+  className="is-flex is-flex-direction-column"
 >
-  <JSONTree
-    collectionLimit={50}
-    data="{
+  <FullMessage
+    message="{
   \\"_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.
@@ -50,41 +49,6 @@ Cupidatat deserunt mollit tempor aliqua. Fugiat ullamco magna pariatur quis null
   \\"degreee\\": \\"master\\",
   \\"degreeeee\\": \\"bachelor\\"
 }"
-    getItemString={[Function]}
-    hideRoot={true}
-    invertTheme={true}
-    isCustomNode={[Function]}
-    keyPath={
-      Array [
-        "root",
-      ]
-    }
-    labelRenderer={[Function]}
-    postprocessValue={[Function]}
-    shouldExpandNode={[Function]}
-    theme={
-      Object {
-        "author": "seth wright (http://sethawright.com)",
-        "base00": "#1d1f21",
-        "base01": "#282a2e",
-        "base02": "#373b41",
-        "base03": "#969896",
-        "base04": "#b4b7b4",
-        "base05": "#c5c8c6",
-        "base06": "#e0e0e0",
-        "base07": "#ffffff",
-        "base08": "#CC342B",
-        "base09": "#F96A38",
-        "base0A": "#FBA922",
-        "base0B": "#198844",
-        "base0C": "#3971ED",
-        "base0D": "#3971ED",
-        "base0E": "#A36AC7",
-        "base0F": "#3971ED",
-        "scheme": "google",
-      }
-    }
-    valueRenderer={[Function]}
   />
 </div>
 `;

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageItem.spec.tsx.snap

@@ -38,7 +38,7 @@ exports[`MessageItem when content is defined matches snapshot 1`] = `
     }
   >
     <MessageContent
-      message="\\"{\\\\\\"foo\\\\\\":\\\\\\"bar\\\\\\",\\\\\\"key\\\\\\":\\\\\\"val\\\\\\"}\\""
+      message="{\\"foo\\":\\"bar\\",\\"key\\":\\"val\\"}"
     />
   </td>
   <td
@@ -107,9 +107,7 @@ exports[`MessageItem when content is undefined matches snapshot 1`] = `
         "wordBreak": "break-word",
       }
     }
-  >
-    <MessageContent />
-  </td>
+  />
   <td
     className="has-text-right"
   >

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/__snapshots__/MessagesTable.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`MessagesTable when topic contains messages matches snapshot 1`] = `
 <Fragment>
   <table
-    className="table is-fullwidth"
+    className="table is-fullwidth is-narrow"
   >
     <thead>
       <tr>