diff --git a/ui/api/messages/actions.ts b/ui/api/messages/actions.ts index 2ea6e62a3..3f866d924 100644 --- 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 index 120459baf..f003463e0 100644 --- 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; diff --git a/ui/components/MessagesTable/MessagesTable.stories.tsx b/ui/components/MessagesTable/MessagesTable.stories.tsx index e40a3929e..dde465ad5 100644 --- 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 index c9d229e7e..706424f13 100644 --- a/ui/components/MessagesTable/MessagesTable.tsx +++ b/ui/components/MessagesTable/MessagesTable.tsx @@ -263,6 +263,7 @@ export function MessagesTable({ return ( {row.attributes.key ? ( + <> + {row.relationships.keySchema?.meta?.artifactType && ( + + + {row.relationships.keySchema?.meta?.artifactType} + + + )} + ) : ( empty )} @@ -299,6 +308,7 @@ export function MessagesTable({ return ( {row.attributes.value ? ( + <> + {row.relationships.valueSchema?.meta?.artifactType && ( + + + {row.relationships.valueSchema?.meta?.artifactType} + + + )} + ) : ( empty )}