Message browser fixes (#347)

* Move the key to a tab in the message details drawer * Rename epoch timestamp to Unix timestamp for clarity
streamshub · Jan 9, 2024 · 61a9d9a · 61a9d9a
1 parent 6123617
commit 61a9d9a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 30 deletions.
diff --git a/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/MessageDetails.tsx b/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/MessageDetails.tsx
@@ -62,7 +62,7 @@ export function MessageDetails({
 }
 
 export type MessageDetailsBodyProps = {
-  defaultTab: "value" | "headers";
+  defaultTab: "value" | "key" | "headers";
   messageKey: string | null;
 } & Omit<Message, "key">;
 
@@ -121,16 +121,6 @@ export function MessageDetailsBody({
               )}
             </DescriptionListDescription>
           </DescriptionListGroup>
-          <DescriptionListGroup>
-            <DescriptionListTerm>{t("field.key")}</DescriptionListTerm>
-            <DescriptionListDescription>
-              {message.messageKey ? (
-                message.messageKey
-              ) : (
-                <NoDataCell columnLabel={t("field.key")} />
-              )}
-            </DescriptionListDescription>
-          </DescriptionListGroup>
         </DescriptionList>
       </FlexItem>
       <FlexItem>
@@ -141,7 +131,19 @@ export function MessageDetailsBody({
             title={<TabTitleText>{t("field.value")}</TabTitleText>}
           >
             <ClipboardCopy isCode={true} isExpanded={true} isReadOnly={true}>
-              {beautifyUnknownValue(message.attributes.value || "")}
+              {beautifyUnknownValue(
+                message.attributes.value || "Message has no value",
+              )}
+            </ClipboardCopy>
+          </Tab>
+          <Tab
+            eventKey={"key"}
+            title={<TabTitleText>{t("field.key")}</TabTitleText>}
+          >
+            <ClipboardCopy isCode={true} isExpanded={true} isReadOnly={true}>
+              {beautifyUnknownValue(
+                message.attributes.key || "Message has no key",
+              )}
             </ClipboardCopy>
           </Tab>
           <Tab
@@ -150,7 +152,8 @@ export function MessageDetailsBody({
           >
             <ClipboardCopy isCode={true} isExpanded={true} isReadOnly={true}>
               {beautifyUnknownValue(
-                JSON.stringify(message.attributes.headers) || "",
+                JSON.stringify(message.attributes.headers) ||
+                  "Message has no header",
               )}
             </ClipboardCopy>
           </Tab>

diff --git a/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/MessagesTable.tsx b/ui/app/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/MessagesTable.tsx
@@ -223,6 +223,10 @@ export function MessagesTable({
                             <UnknownValuePreview
                               value={row.attributes.key}
                               truncateAt={40}
+                              onClick={() => {
+                                setDefaultTab("key");
+                                onSelectMessage(row);
+                              }}
                             />
                           ) : (
                             empty

diff --git a/...pp/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/UnknownValuePreview.tsx b/...pp/[locale]/kafka/[kafkaId]/topics/[topicId]/messages/_components/UnknownValuePreview.tsx
@@ -1,6 +1,6 @@
-import { truncate } from "./utils";
 import { Flex, FlexItem } from "@/libs/patternfly/react-core";
 import { useTranslations } from "next-intl";
+import { truncate } from "./utils";
 
 const PREVIEW_LENGTH = 170;
 
@@ -9,6 +9,7 @@ export type UnknownValuePreviewProps = {
   truncateAt?: number;
   onClick?: () => void;
 };
+
 export function UnknownValuePreview({
   value,
   truncateAt = PREVIEW_LENGTH,
@@ -20,22 +21,19 @@ export function UnknownValuePreview({
     <Flex
       direction={{ default: "column" }}
       spaceItems={{ default: "spaceItemsXs" }}
+      onClick={
+        onClick
+          ? (e) => {
+              e.stopPropagation();
+              onClick();
+            }
+          : undefined
+      }
     >
       <FlexItem>{preview}</FlexItem>
       {truncated && (
         <FlexItem>
-          <a
-            onClick={
-              onClick
-                ? (e) => {
-                    e.stopPropagation();
-                    onClick();
-                  }
-                : undefined
-            }
-          >
-            {t("show_more")}
-          </a>
+          <a>{t("show_more")}</a>
         </FlexItem>
       )}
     </Flex>

diff --git a/ui/messages/en.json b/ui/messages/en.json
@@ -86,7 +86,7 @@
     "search_button_label": "Search",
     "no_data": "No data",
     "field": {
-      "epoch": "Epoch timestamp",
+      "epoch": "Unix timestamp",
       "headers": "Headers",
       "key": "Key",
       "offset": "Offset",
@@ -97,9 +97,9 @@
       "value": "Value"
     },
     "filter": {
-      "epoch": "From epoch",
-      "epoch_aria_label": "Specify epoch",
-      "epoch_placeholder": "Specify epoch",
+      "epoch": "From Unix timestamp",
+      "epoch_aria_label": "Specify Unix timestamp",
+      "epoch_placeholder": "Specify Unix timestamp",
       "latest": "Latest messages",
       "offset": "From offset",
       "offset_aria_label": "Specify offset",