Fix topic messages (#664)

2021-07-12 13:58:12 +03:00 · 2021-07-12 13:58:12 +03:00 · bf6dd6c91b
commit bf6dd6c91b
parent 73d4e48941
8 changed files with 52 additions and 76 deletions
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/FullMessage.tsx
+++ b/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;
--- 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
@ -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
--- 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
@ -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
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Messages.tsx
+++ b/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>
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
+++ b/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>
--- 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
@ -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>
 `;
--- 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
@ -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"
  >
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/test/snapshots/MessagesTable.spec.tsx.snap
+++ b/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>