Minimal UI changes to display encoded key/value types

Signed-off-by: Michael Edgar <[email protected]>
streamshub · Oct 14, 2024 · 80d19e8 · 80d19e8
1 parent 532766e
commit 80d19e8
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 1 deletion.
diff --git a/ui/api/messages/actions.ts b/ui/api/messages/actions.ts
@@ -56,7 +56,7 @@ export async function getTopicMessages(
   const sp = new URLSearchParams(
     filterUndefinedFromObj({
       "fields[records]":
-        "partition,offset,timestamp,timestampType,headers,key,value,size",
+        "partition,offset,timestamp,timestampType,headers,key,keySchema,value,valueSchema,size",
       "filter[partition]": params.partition,
       "filter[offset]":
         params.filter?.type === "offset"

diff --git a/ui/api/messages/schema.ts b/ui/api/messages/schema.ts
@@ -1,5 +1,19 @@
 import { z } from "zod";
 
+const RelatedSchema = z.object({
+  meta: z.object({
+    artifactType: z.string().optional(),
+    name: z.string().optional(),
+  }).nullable().optional(),
+  links: z.object({
+    content: z.string(),
+  }).nullable().optional(),
+  data: z.object({
+    type: z.literal("schemas"),
+    id: z.string(),
+  }),
+});
+
 export const MessageSchema = z.object({
   type: z.literal("records"),
   attributes: z.object({
@@ -12,9 +26,15 @@ export const MessageSchema = z.object({
     value: z.string().nullable(),
     size: z.number().optional(),
   }),
+  relationships: z.object({
+    keySchema: RelatedSchema.optional().nullable(),
+    valueSchema: RelatedSchema.optional().nullable(),
+  }),
 });
+
 export const MessageApiResponse = z.object({
   meta: z.object({}).nullable().optional(),
   data: z.array(MessageSchema),
 });
+
 export type Message = z.infer<typeof MessageSchema>;
diff --git a/ui/components/MessagesTable/MessagesTable.stories.tsx b/ui/components/MessagesTable/MessagesTable.stories.tsx
@@ -119,6 +119,13 @@ function sampleData({
           '{"order":{"address":{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},"contact":{"firstName":"james","lastName":"smith","phone":"512-123-1234"},"orderId":"123","customerName":""},"primitives":{"stringPrimitive":"some value","booleanPrimitive":true,"numberPrimitive":24},"addressList":[{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"}]}',
         size: 1234,
       },
+      relationships: {
+        valueSchema: {
+          meta: {
+            artifactType: "AVRO"
+          }
+        }
+      },
     },
     {
       attributes: {
@@ -139,6 +146,13 @@ function sampleData({
           '{"order":{"address":{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},"contact":{"firstName":"james","lastName":"smith","phone":"512-123-1234"},"orderId":"123"},"primitives":{"stringPrimitive":"some value","booleanPrimitive":true,"numberPrimitive":24},"addressList":[{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"}]}',
         size: 1234,
       },
+      relationships: {
+        keySchema: {
+          meta: {
+            artifactType: "PROTOBUF"
+          }
+        }
+      },
     },
     {
       attributes: {
@@ -151,6 +165,7 @@ function sampleData({
         value: '{"foo": "bar", "baz": "???"}',
         size: 432,
       },
+      relationships: {},
     },
     {
       attributes: {
@@ -161,6 +176,7 @@ function sampleData({
         value: "random string",
         size: 532,
       },
+      relationships: {},
     },
     {
       attributes: {
@@ -171,6 +187,7 @@ function sampleData({
         value: "",
         size: 0,
       },
+      relationships: {},
     },
   ];
   const numberOfMessages =
@@ -187,6 +204,9 @@ function sampleData({
               (filterOffset ?? 0) + numberOfMessages - messages.length * i - j,
             partition: filterPartition || m.attributes.partition,
           },
+          relationships: {
+            ...m.relationships,
+          },
         }))
         .filter((m) => {
           if (filterQuery) {

diff --git a/ui/components/MessagesTable/MessagesTable.tsx b/ui/components/MessagesTable/MessagesTable.tsx
@@ -263,6 +263,7 @@ export function MessagesTable({
                         return (
                           <Cell>
                             {row.attributes.key ? (
+                              <>
                               <UnknownValuePreview
                                 value={row.attributes.key}
                                 highlight={filterQuery}
@@ -271,6 +272,14 @@ export function MessagesTable({
                                   onSelectMessage(row);
                                 }}
                               />
+                              {row.relationships.keySchema?.meta?.artifactType && (
+                                <TextContent>
+                                  <Text component={"small"}>
+                                    {row.relationships.keySchema?.meta?.artifactType}
+                                  </Text>
+                                </TextContent>
+                              )}
+                              </>
                             ) : (
                               empty
                             )}
@@ -299,6 +308,7 @@ export function MessagesTable({
                         return (
                           <Cell>
                             {row.attributes.value ? (
+                              <>
                               <UnknownValuePreview
                                 value={row.attributes.value}
                                 highlight={filterQuery}
@@ -307,6 +317,14 @@ export function MessagesTable({
                                   onSelectMessage(row);
                                 }}
                               />
+                              {row.relationships.valueSchema?.meta?.artifactType && (
+                                <TextContent>
+                                  <Text component={"small"}>
+                                    {row.relationships.valueSchema?.meta?.artifactType}
+                                  </Text>
+                                </TextContent>
+                              )}
+                              </>
                             ) : (
                               empty
                             )}